Pages rasoir dans ASP.NET Core

Pages de rasoir

Razor Pages est une architecture d'application Web ASP.NET Core basée sur des pages.
Par rapport au modèle MVC, Razor Pages est plus productif.
Razer Pages nécessite deux middleware :

• builder…Services.AddRazorPages et services Razor Pages
• app.MapRazorPages et points de terminaison de Razor Pages

.cshtml et .cshtml.cs

Dans la page la plus simple :

@page
<h1>Hello, world!</h1>
<h2>The time on the server is @DateTime.Now</h2>

Elle ressemble à la page MVC, mais la particularité est qu'il existe une directive @page. La directive @page signifie que cette page peut recevoir des requêtes http directement sans passer par le contrôleur.

Le code de la deuxième page Pages/Index2.cshtml est le suivant :

@page
@using RazorPagesIntro.Pages
@model Index2Model

<h2>Separate page model</h2>
<p>
    @Model.Message
</p>

La directive @using RazorPagesIntro.Pages est utilisée
et le code d'implémentation de RazorPagesIntro.Pages Pages/Index2.cshtml.cs est le suivant :

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using System;

namespace RazorPagesIntro.Pages
{
    
    
    public class Index2Model : PageModel
    {
    
    
        public string Message {
    
     get; private set; } = "PageModel in C#";
        public void OnGet()
        {
    
    
            Message += $" Server time is {
      
       DateTime.Now }";
        }
    }
}

Une page Index2.cshtml, avec un Index2.cshtml.cs, similaire à xaml et xaml.cs dans WPF.

Routage du chemin d'URL

Le chemin de l'url correspond au chemin de la page. Par exemple:

• / ou /Index correspond à /Pages/Index.cshtml
• /Contact correspond /Pages/Contact.cshtml
• /Store/Correspondances de contact /Pages/Store/Contact.cshtml

Un exemple de publication

Il y a une page d'affichage de Pages/Customers/Create.cshtml, le code est le suivant :
CreateModel dans la directive @model correspond à un Model nommé Create,
et la soumission du Form générera Http Post,

@page
@model RazorPagesContacts.Pages.Customers.CreateModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<p>Enter a customer name:</p>

<form method="post">
    Name:
    <input asp-for="Customer!.Name" />
    <input type="submit" />
</form>

Les parties correspondantes du code dans Pages/Customers/Create.cshtml.cs sont les suivantes :
OnPostAsync gère la soumission du formulaire en cshtml, et
il existe généralement une méthode OnGet pour gérer les requêtes Http Get.
La méthode RedirectToPage redirige vers le chemin ./Index.
[BindProperty] Les attributs d'annotation représentent la liaison de modèle.
BindProperty dans Razor Pages est généralement utilisé pour les propriétés non-GET.

[BindProperty]
public Customer? Customer {
    
     get; set; }

public async Task<IActionResult> OnPostAsync()
{
    
    
    if (!ModelState.IsValid)
    {
    
    
        return Page();
    }
    if (Customer != null) _context.Customer.Add(Customer);
    return RedirectToPage("./Index");
}

Exemple de page d'accueil

Index.cshtml

@page
@model RazorPagesContacts.Pages.Customers.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<h1>Contacts home page</h1>
<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @if (Model.Customers != null)
        {
            foreach (var contact in Model.Customers)
            {
                <tr>
                    <td> @contact.Id </td>
                    <td>@contact.Name</td>
                    <td>
                        <!-- <snippet_Edit> -->
                        <a asp-page="./Edit" asp-route-id="@contact.Id">Edit</a> |
                        <!-- </snippet_Edit> -->
                        <!-- <snippet_Delete> -->
                        <button type="submit" asp-page-handler="delete" asp-route-id="@contact.Id">delete</button>
                        <!-- </snippet_Delete> -->
                    </td>
                </tr>
            }
        }
        </tbody>
    </table>
    <a asp-page="Create">Create New</a>
</form>

l'un d'eux

<a asp-page="./Edit" asp-route-id="@contact.Id">Edit</a> |

Utilisez asp-route-id pour générer une URL pointant vers la page Modifier, l'URL contient l'identifiant du contact, par exemple :
https://localhost:5001/Edit/1
et le html de la méthode de suppression

<button type="submit" asp-page-handler="delete" asp-route-id="@contact.Id">delete</button>

Le html généré par le serveur est :

<button type="submit" formaction="/Customers?id=1&amp;handler=delete">delete</button>

Code de modèle correspondant Index.cshtml.cs :

public class IndexModel : PageModel
{
    
    
    private readonly Data.CustomerDbContext _context;
    public IndexModel(Data.CustomerDbContext context)
    {
    
    
        _context = context;
    }

    public IList<Customer>? Customers {
    
     get; set; }

    public async Task OnGetAsync()
    {
    
    
        Customers = await _context.Customer.ToListAsync();
    }

    public async Task<IActionResult> OnPostDeleteAsync(int id)
    {
    
    
        var contact = await _context.Customer.FindAsync(id);

        if (contact != null)
        {
    
    
            _context.Customer.Remove(contact);
            await _context.SaveChangesAsync();
        }

        return RedirectToPage();
    }
}

Utilisation de mises en page, de partiels, de modèles et d'assistants de balises

en attente de mise à niveau

Génération d'URL

en attente de mise à niveau

Propriété ViewData

en attente de mise à niveau

Propriété TempData

en attente de mise à niveau