Razor Páginas no ASP.NET Core

Páginas de navalha

Razor Pages é uma arquitetura de aplicativo Web ASP.NET Core baseada em página.
Comparado ao modelo MVC, o Razor Pages é mais produtivo.
O Razer Pages requer dois middlewares:

• construtor…Services.AddRazorPages e serviços do Razor Pages
• app.MapRazorPages com endpoints do Razor Pages

.cshtml e .cshtml.cs

Na página mais simples:

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

É semelhante à página MVC, mas a característica especial é que existe uma diretiva @page. A diretiva @page significa que esta página pode receber solicitações http diretamente, sem passar pelo controlador.

O código da segunda página Pages/Index2.cshtml é o seguinte:

@page
@using RazorPagesIntro.Pages
@model Index2Model

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

A diretiva @using RazorPagesIntro.Pages é usada
e o código de implementação de RazorPagesIntro.Pages Pages/Index2.cshtml.cs é o seguinte:

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 }";
        }
    }
}

Uma página Index2.cshtml, com Index2.cshtml.cs, semelhante a xaml e xaml.cs no WPF.

Roteamento de caminho de URL

O caminho do URL corresponde ao caminho da página. por exemplo:

• / ou /Index corresponde a /Pages/Index.cshtml
• /Contato corresponde a /Pages/Contact.cshtml
• /Loja/Contato corresponde a /Pages/Store/Contact.cshtml

Um exemplo de postagem

Existe uma página de visualização de Pages/Customers/Create.cshtml, o código é o seguinte:
CreateModel na diretiva @model corresponde a um modelo chamado Create,
e o envio do Form irá gerar 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>

As partes correspondentes do código em Pages/Customers/Create.cshtml.cs são as seguintes:
OnPostAsync lida com o envio do formulário em cshtml e
geralmente há um método OnGet para lidar com solicitações Http Get.
O método RedirectToPage redireciona para o caminho ./Index.
[BindProperty] Os atributos de anotação representam a associação do modelo.
BindProperty em Razor Pages geralmente é usado para propriedades não 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");
}

Exemplo de página inicial

Índice.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>

um deles

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

Use asp-route-id para gerar uma URL apontando para a página Editar, a URL contém o ID do contato, por exemplo:
https://localhost:5001/Edit/1
e o html do método delete

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

O html gerado pelo servidor é:

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

Código do modelo correspondente 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();
    }
}

Usando layouts, parciais, modelos e auxiliares de tags

atualização pendente

Geração de URL

atualização pendente

Propriedade ViewData

atualização pendente

Propriedade TempData

atualização pendente