Exercício – Adicionar novo formulário de pizza
- 10 minutos
Nesta unidade, você concluirá a página Lista de Pizza adicionando um formulário para criar novas pizzas. Você também adicionará manipuladores de página para lidar com o envio de formulários e a exclusão de pizzas.
Adicionar um formulário para criar novas pizzas
Vamos começar adicionando propriedades à PizzaListModel classe para representar a entrada do usuário. Você também adicionará o manipulador de página apropriado.
Abra Pages\PizzaList.cshtml.cs e adicione a seguinte propriedade à
PizzaListModelclasse:[BindProperty] public Pizza NewPizza { get; set; } = default!;No código anterior apresentado:
- Uma propriedade nomeada
NewPizzaé adicionada àPizzaListModelclasse.NewPizzaé umPizzaobjeto.
- O
BindPropertyatributo é aplicado àNewPizzapropriedade.- O
BindPropertyatributo é usado para associar aNewPizzapropriedade à página Razor. Quando uma solicitação HTTP POST for feita, aNewPizzapropriedade será preenchida com a entrada do usuário.
- O
- A
NewPizzapropriedade é inicializada paradefault!.- A
default!palavra-chave é usada para inicializar aNewPizzapropriedade paranull. Isso impede que o compilador gere um aviso sobre aNewPizzapropriedade não inicializada.
- A
- Uma propriedade nomeada
Agora, adicione o manipulador de páginas para HTTP POST. No mesmo arquivo, adicione o seguinte método à
PizzaListModelclasse:public IActionResult OnPost() { if (!ModelState.IsValid || NewPizza == null) { return Page(); } _service.AddPizza(NewPizza); return RedirectToAction("Get"); }No código anterior apresentado:
- A
ModelState.IsValidpropriedade é usada para determinar se a entrada do usuário é válida.- As regras de validação são inferidas de atributos (como
RequiredeRange) naPizzaclasse em Models\Pizza.cs. - Se a entrada do usuário for inválida, o
Pagemétodo será chamado para renderizar novamente a página.
- As regras de validação são inferidas de atributos (como
- A
NewPizzapropriedade é usada para adicionar uma nova pizza ao_serviceobjeto. - O
RedirectToActionmétodo é usado para redirecionar o usuário para oGetmanipulador de página, que renderizará novamente a página com a lista atualizada de pizzas.
- A
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.
Retorne ao terminal em execução
dotnet watche pressione Ctrl+R para recarregar o aplicativo.
Agora que há um manipulador de páginas para lidar com o envio de formulários, vamos adicionar o formulário à página Razor.
Abra Pages\PizzaList.cshtml e substitua
<!-- New Pizza form will go here -->pelo seguinte código:<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>No código anterior apresentado:
- O
asp-validation-summaryatributo é usado para exibir erros de validação para todo o modelo. - Cada campo de formulário (
<input>e<select>elementos) e cada um<label>está associado à propriedade correspondenteNewPizzausando oasp-foratributo. - O
asp-validation-foratributo é usado para exibir erros de validação para cada campo de formulário. - O
@Html.DisplayNameFormétodo é usado para exibir o nome de exibição daIsGlutenFreepropriedade. Esse é um método auxiliar Razor usado para mostrar o nome de exibição de uma propriedade. Fazer o rótulo dessa forma garante que a caixa de seleção seja selecionada quando o usuário clicar no rótulo. - Um botão enviar rotulado
Createé adicionado ao formulário para postar os dados do formulário no servidor. Em runtime, quando o usuário seleciona esse botão Criar , o navegador envia o formulário como uma solicitação HTTP POST para o servidor.
- O
Na parte inferior da página, adicione o seguinte código:
@section Scripts { <partial name="_ValidationScriptsPartial" /> }Isso injeta os scripts de validação do lado do cliente na página. Os scripts de validação do lado do cliente são usados para validar a entrada do usuário antes que o formulário seja enviado ao servidor.
Salve o arquivo. No navegador, a página Lista de Pizza é atualizada com o novo formulário. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente, mas você precisa atualizar a guia do navegador manualmente.
Insira uma nova pizza e selecione o botão Criar . A página deve atualizar e exibir a nova pizza na lista.
Adicionar um manipulador de página para excluir pizzas
Há uma última peça a ser adicionada à página Lista de Pizzas: um mecanismo para excluir pizzas. Os botões para excluir pizzas já estão na página, mas ainda não fazem nada.
De volta em Pages\PizzaList.cshtml.cs, adicione o seguinte método à
PizzaListModelclasse:public IActionResult OnPostDelete(int id) { _service.DeletePizza(id); return RedirectToAction("Get"); }No código anterior apresentado:
- O método
OnPostDeleteé chamado quando o usuário clica no botão Excluir para uma pizza.- A página sabe usar esse método porque o
asp-page-handleratributo no botão Excluir em Pages\PizzaList.cshtml está definido comoDelete.
- A página sabe usar esse método porque o
- O
idparâmetro é usado para identificar a pizza a ser excluída.- O parâmetro
idestá associado ao valor de rotaidna URL. Isso é feito com oasp-route-idatributo no botão Excluir em Pages\PizzaList.cshtml.
- O parâmetro
- O
DeletePizzamétodo é chamado no_serviceobjeto para excluir a pizza. - O
RedirectToActionmétodo é usado para redirecionar o usuário para oGetmanipulador de página, que renderizará novamente a página com a lista atualizada de pizzas.
- O método
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.
Teste o botão Excluir para uma pizza. A página deve ser atualizada e a pizza selecionada deve ser removida da lista.
Parabéns! Você criou com êxito uma Página Razor que exibe uma lista de pizzas, permite que o usuário adicione novas pizzas e, também, permite excluir pizzas.