Ejercicio: Adición de un nuevo formulario de pizza
- 10 minutos
En esta unidad, finalizará la página Lista de pizzas agregando un formulario para crear nuevas pizzas. 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 nuevas pizzas
Comencemos agregando propiedades a la PizzaListModel clase 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
PizzaListModelclase :[BindProperty] public Pizza NewPizza { get; set; } = default!;En el código anterior:
- Se agrega una propiedad denominada
NewPizzaa laPizzaListModelclase .NewPizzaes unPizzaobjeto .
- El
BindPropertyatributo se aplica a laNewPizzapropiedad .- El
BindPropertyatributo se usa para enlazar laNewPizzapropiedad a la página de Razor. Cuando se realiza una solicitud HTTP POST, se rellenará la entrada del usuario en la propiedadNewPizza.
- El
- La
NewPizzapropiedad se inicializa endefault!.- La
default!palabra clave se usa para inicializar laNewPizzapropiedad ennull. Esto impide que el compilador genere una advertencia sobre laNewPizzapropiedad que no se inicializa.
- La
- Se agrega una propiedad denominada
Ahora agregue el controlador de página para HTTP POST. En el mismo archivo, agregue el método siguiente a la
PizzaListModelclase :public IActionResult OnPost() { if (!ModelState.IsValid || NewPizza == null) { return Page(); } _service.AddPizza(NewPizza); return RedirectToAction("Get"); }En el código anterior:
- La
ModelState.IsValidpropiedad se usa para determinar si la entrada del usuario es válida.- Las reglas de validación se deducen de atributos (como
RequiredyRange) en laPizzaclase de Models\Pizza.cs. - Si la entrada del usuario no es válida,
Pagese llama al método para volver a representar la página.
- Las reglas de validación se deducen de atributos (como
- La
NewPizzapropiedad se usa para agregar una nueva pizza al_serviceobjeto . - El
RedirectToActionmétodo se usa para redirigir al usuario al controlador de páginasGet, que volverá a renderizar la página con la lista actualizada de pizzas.
- La
Guarde el archivo. Si usa GitHub Codespaces, el archivo se guardará automáticamente.
Vuelva al terminal en ejecución
dotnet watchy presione Ctrl+R para volver a cargar la aplicación.
Ahora que hay un controlador de página para controlar el envío del formulario, vamos a agregar el formulario a la página de Razor.
Abra Pages\PizzaList.cshtml y reemplace por
<!-- New Pizza form will go here -->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
asp-validation-summaryatributo se usa para mostrar errores de validación para todo el modelo. - Cada campo de formulario (
<input>y<select>elementos) y cada uno<label>está enlazado a la propiedad correspondienteNewPizzamediante elasp-foratributo . - El
asp-validation-foratributo se usa para mostrar los errores de validación de cada campo de formulario. - El método
@Html.DisplayNameForse utiliza para mostrar el nombre visible de la propiedadIsGlutenFree. Se trata de un método auxiliar de Razor que se usa para mostrar el nombre para mostrar de una propiedad. Al realizar la etiqueta de esta manera, se garantiza que la casilla esté activada cuando el usuario haga clic en la etiqueta. - Se agrega un botón enviar etiquetado
Createal formulario para publicar los datos del 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.
- El
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 enviar el formulario al servidor.
Guarde el archivo. En el explorador, la página Lista de pizzas se actualiza con el nuevo formulario. Si usa GitHub Codespaces, el archivo se guarda automáticamente, pero tendrá que actualizar manualmente la pestaña del explorador.
Introduzca una pizza nueva y seleccione el botón Crear. La página debe actualizarse y mostrar la nueva pizza en la lista.
Agregar un controlador de página para eliminar pizzas
Hay una última pieza que agregar a la página Lista de pizzas: un controlador de página para eliminar pizzas. Los botones para eliminar pizzas ya están en la página, pero aún no hacen nada.
De nuevo en Pages\PizzaList.cshtml.cs, agregue el método siguiente a la
PizzaListModelclase :public IActionResult OnPostDelete(int id) { _service.DeletePizza(id); return RedirectToAction("Get"); }En el código anterior:
- El
OnPostDeletemétodo se llama cuando el usuario hace clic en el botón Eliminar para una pizza.- La página sabe usar este método porque el
asp-page-handleratributo del botón Eliminar de Pages\PizzaList.cshtml está establecidoDeleteen .
- La página sabe usar este método porque el
- El
idparámetro se usa para identificar la pizza que se va a eliminar.- El
idparámetro está enlazado alidvalor de ruta en la dirección URL. Esto se logra con elasp-route-idatributo en el botón Eliminar de Pages\PizzaList.cshtml.
- El
- El método
DeletePizzase llama en el objeto_servicepara eliminar la pizza. - El método
RedirectToActionse usa para redirigir al usuario al manejador de páginasGet, que volverá a representar la página con la lista actualizada de pizzas.
- El
Guarde el archivo. Si usa GitHub Codespaces, el archivo se guardará automáticamente.
Pruebe el botón Eliminar en una pizza. La página debe actualizarse y la pizza seleccionada debe quitarse de la lista.
¡Felicidades! Ha creado correctamente una página de Razor que muestra una lista de pizzas, permite al usuario agregar nuevas pizzas y también permite al usuario eliminar pizzas.