Ejercicio: Control del envío de formularios de Pizza

  • 7 minutos

En esta unidad, agregará un controlador de página HTTP POST para el formulario de la página de Razor Pizza. Por último, recorrerá el modelo Pizza y sus anotaciones de datos que controlan la validación del lado cliente y del lado servidor.

Examen de la estructura de una clase PageModel de Razor Pages

Abra el archivo de la clase PageModel Pages/Pizza.cshtml.cs. Es posible que recuerde que al crear una página de Razor denominada Pizza, se generó su archivo de clase PageModel denominado Pizza.cshtml.cs. Examine el contenido. Contiene el código de C# siguiente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesPizza.Pages
{
    public class PizzaModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Actualización del controlador de página HTTP Get para mostrar la lista de pizzas

Actualmente, la clase PizzaModel controla la solicitud HTTP GET con un controlador de página OnGet vacío. Vamos a actualizarlo para mostrar una lista de pizzas de PizzaService.

Actualización del controlador de página OnGet

Actualice el método OnGet de la manera siguiente:

public void OnGet()
{
    pizzas = PizzaService.GetAll();
}

Agregue una variable List<Pizza> llamada pizzas a la clase PizzaModel:

public List<Pizza> pizzas;

Cuando se llame al método OnGet, se asignarán los resultados del método PizzaService.GetAll() a la variable pizzas. Esta variable será accesible para la plantilla de página de Razor, donde se escribirá en la tabla que enumera las pizzas disponibles.

Uso de un método de utilidad para dar formato a la información de opciones sin gluten de la lista

Nuestra propiedad IsGlutenFree es un valor booleano. Podemos usar un método de utilidad para dar formato al valor booleano como una cadena. Agregue el método de utilidad siguiente a la clase PizzaModel:

public string GlutenFreeText(Pizza pizza)
{
    if (pizza.IsGlutenFree)
        return "Gluten Free";
    return "Not Gluten Free";
}

Incorporación de un controlador de página HTTP POST a PageModel

Agregue el método siguiente a la clase PageModel Pages/Pizza.cshtml.cs. Guarde los cambios.

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    PizzaService.Add(NewPizza);
    return RedirectToAction("Get");
}

La clase PizzaModel ahora tiene un controlador de página OnPost asincrónico. OnPost se ejecuta cuando el usuario publica el formulario de la página Pizza. También puede usar el sufijo de nomenclatura asincrónico opcional, OnPostAsync.

El controlador de página OnPost debe realizar las tareas siguientes para esta aplicación:

  • Comprobar que los datos enviados por el usuario publicados en PageModel son válidos.
  • Si los cambios intentados en PageModel no son válidos, se vuelve a mostrar la página Pizza al usuario. Se muestra un mensaje para clarificar los requisitos de entrada.
  • Si la actualización de PageModel es válida, los cambios de datos se pasan a un servicio denominado PizzaService. PizzaService controlará el problema de las solicitudes HTTP y las respuestas a la API web.

Enlace del modelo

La clase PizzaModel necesita acceder al modelo Pizza. Validará y pasará las entradas Pizza del formulario Pizza mediante el atributo [BindProperty]. Agregue el siguiente código a la clase PizzaModel:

[BindProperty]
public Pizza NewPizza { get; set; }

Agregación de un controlador HTTP POST para los botones Eliminar

Una página de Razor puede incluir varios formularios. Puesto que los botones Eliminar de nuestra lista de pizzas modifican los datos, se requiere HTTP POST en lugar de HTTP GET.

Agregue el siguiente método OnPostDelete a la clase PizzaModel:

public IActionResult OnPostDelete(int id)
{
    PizzaService.Delete(id);
    return RedirectToAction("Get");
}

Vínculo a la página Pizza

Se creó e implementó la página Pizza. se permitirá que los usuarios naveguen a ella.

Incorporación de una aplicación auxiliar de etiquetas delimitadoras a la página Index

  1. En Pages/Shared/Layout.cshtml, agregue el código siguiente a la sección <nav> entre los vínculos Home y Privacy:
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/Pizza">Pizza List</a>
</li>

El resultado aparecerá de la forma siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorPagesPizza</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesPizza</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Pizza">Pizza List</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - RazorPagesPizza - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
  1. Guarde los cambios.

El código resaltado anterior usa una aplicación auxiliar de etiquetas delimitadoras. La aplicación auxiliar de etiquetas:

  • Dirige al usuario a la página de Razor Pages/Pizzas/Create.cshtml, ubicada en el mismo directorio que la página Index.
  • Mejora la etiqueta (<a>) delimitadora HTML estándar al agregar atributos HTML personalizados, como asp-page-handler.

El atributo asp-page-handler se usa para enrutar a un controlador de página específico para la página de Razor definida en el atributo asp-page. El atributo asp-page se usa para establecer el valor del atributo href de una etiqueta delimitadora en una página de Razor específica.