Ejercicio: Adición de un nuevo formulario de pizza

10 minutos

En esta unidad, finalizará la página Lista de pizzas mediante la adición de un formulario para crear pizzas nuevas. También agregará controladores de página para controlar el envío de formularios y la eliminación de pizzas.

Agregar un formulario para crear pizzas nuevas

Empecemos agregando propiedades a la clase PizzaListModel para representar la entrada del usuario. También agregará el controlador de página adecuado.

Abra Pages\PizzaList.cshtml.cs y agregue la siguiente propiedad a la clase PizzaListModel:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
En el código anterior:
- Se agrega una propiedad llamada NewPizza a la clase PizzaListModel.
  - NewPizza es un objeto Pizza.
- Se aplica el atributo BindProperty a la propiedad NewPizza.
  - El atributo BindProperty se usa para enlazar la propiedad NewPizza a la página de Razor. Al realizarse una solicitud HTTP POST, la propiedad NewPizza se rellenará con la entrada del usuario.
- La propiedad NewPizza se inicializa en default!.
  - La palabra clave default! se usa para inicializar la propiedad NewPizza en null. Esto impide que el compilador genere una advertencia sobre la propiedad NewPizza que no se inicializa.
Ahora agregue el controlador de página para HTTP POST. En el mismo archivo, agregue el siguiente método a la clase PizzaListModel:
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
En el código anterior:
- La propiedad ModelState.IsValid se usa para determinar si la entrada del usuario es válida.
  - Las reglas de validación se deducen a partir de atributos (como Required y Range) en la clase Pizza en Models\Pizza.cs.
  - Si la entrada del usuario no es válida, se llama al método Page para volver a representar la página.
- La propiedad NewPizza se usa para agregar una pizza nueva al objeto _service.
- El método RedirectToAction se usa para redirigir al usuario al controlador de página Get, que volverá a representar la página con la lista actualizada de pizzas.
Guarde el archivo. Si usa GitHub Codespaces, el archivo se guardará automáticamente.
Vuelva al terminal en ejecución dotnet watch y presione Ctrl+R para volver a cargar la aplicación.

Ahora que hay un controlador de página para controlar el envío de formularios, vamos a agregar el formulario a la página de Razor.

Abra Pages\PizzaList.cshtml y reemplace  con el código siguiente:

<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="NewPizza.Name" class="control-label"></label>
    <input asp-for="NewPizza.Name" class="form-control" />
    <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Size" class="control-label"></label>
    <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
        <option value="">-- Select Size --</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
    </select>
    <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
</div>
<div class="form-group form-check">
    <label class="form-check-label">
        <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
    </label>
</div>
<div class="form-group">
    <label asp-for="NewPizza.Price" class="control-label"></label>
    <input asp-for="NewPizza.Price" class="form-control" />
    <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>

En el código anterior:

El atributo asp-validation-summary se usa para mostrar errores de validación para todo el modelo.
Cada campo de formulario (elementos <input> y <select>) y cada <label> se enlaza a la propiedad correspondiente NewPizza con el atributo asp-for.
El atributo asp-validation-for se usa para mostrar cualquier error de validación para cada campo de formulario.
El método @Html.DisplayNameFor se usa para mostrar el nombre de visualización de la propiedad IsGlutenFree. Se trata de un método auxiliar de Razor que se usa para mostrar el nombre de visualización de una propiedad. Con la etiqueta de esta forma, se garantiza que la casilla se active cuando el usuario haga clic en la etiqueta.
Un botón de envío etiquetado Create se agrega al formulario para publicar los datos de formulario en el servidor. En tiempo de ejecución, cuando el usuario selecciona este botón Crear, el explorador envía el formulario como una solicitud HTTP POST al servidor.

En la parte inferior de la página, agregue el código siguiente:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Esto inserta los scripts de validación del lado cliente en la página. Los scripts de validación del lado cliente se usan para validar la entrada del usuario antes de enviarse el formulario al servidor.
Guarde el archivo. En el explorador, la página Lista de pizzas se actualiza con el formulario nuevo. Si usa GitHub Codespaces, el archivo se guardará automáticamente, pero tendrá que actualizar manualmente la pestaña del explorador.
Especifique una pizza nueva y seleccione el botón Crear. La página debe actualizarse y mostrar la pizza nueva en la lista.

Agregar un controlador de página para eliminar pizzas

Hay un último componente para agregar a la página Lista de pizzas: un controlador de página para eliminar pizzas. Los botones para eliminar pizzas ya aparecen en la página, pero aún no hacen nada.

De nuevo en Pages\PizzaList.cshtml.cs, agregue el siguiente método a la clase PizzaListModel:
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
En el código anterior:
- Se llama al método OnPostDelete cuando el usuario hace clic en el botón Eliminar de una pizza.
  - La página sabe usar este método porque el atributo asp-page-handler en el botón Eliminar en Pages\PizzaList.cshtml se establece en Delete.
- El parámetro id se usa para identificar la pizza que se va a eliminar.
  - El parámetro id se enlaza al valor de ruta id en la dirección URL. Esto se logra con el atributo asp-route-id en el botón Eliminar en Pages\PizzaList.cshtml.
- Se llama al método DeletePizza en el objeto _service para eliminar la pizza.
- El método RedirectToAction se usa para redirigir al usuario al controlador de página Get, que volverá a representar la página con la lista actualizada de pizzas.
Guarde el archivo. Si usa GitHub Codespaces, el archivo se guardará automáticamente.
Pruebe el botón Eliminar de una pizza. La página debe actualizarse y la pizza seleccionada debe quitarse de la lista.

¡Enhorabuena! Ha creado correctamente una página de Razor en la que se muestra una lista de pizzas y que también permite al usuario agregar pizzas nuevas y eliminar pizzas.

Ejercicio: Adición de un nuevo formulario de pizza

Agregar un formulario para crear pizzas nuevas

Agregar un controlador de página para eliminar pizzas

Comprobación de conocimientos

Comentarios