Exercício – Adicionar novo formulário de pizza

Concluído

Nesta unidade, você concluirá a página Lista de Pizzas adicionando um formulário para criar 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 pizzas

Vamos começar adicionando propriedades à classe PizzaListModel para representar a entrada de usuário. Você também adicionará o manipulador de página apropriado.

1. Abra Pages\PizzaList.cshtml.cs e adicione a seguinte propriedade à classe PizzaListModel:

   [BindProperty]
   public Pizza NewPizza { get; set; } = default!;
   

   No código anterior:

   • Uma propriedade chamada NewPizza é adicionada à classe PizzaListModel.
     • NewPizza é um objeto Pizza.
   • O atributo BindProperty é aplicado à propriedade NewPizza.
     • O atributo BindProperty é utilizado para associar a propriedade NewPizza à Razor Page. Quando uma solicitação HTTP POST é feita, a propriedade NewPizza é preenchida com a entrada de usuário.
   • A propriedade NewPizza é inicializada com default!.
     • A palavra-chave default! é usada para inicializar a propriedade NewPizza para null. Isso impede que o compilador gere um aviso sobre a propriedade NewPizza não estar inicializada.

2. Agora, adicione o manipulador de página para HTTP POST. No mesmo arquivo, adicione o seguinte método à classe PizzaListModel:

   public IActionResult OnPost()
   {
       if (!ModelState.IsValid || NewPizza == null)
       {
           return Page();
       }
   
       _service.AddPizza(NewPizza);
   
       return RedirectToAction("Get");
   }
   

   No código anterior:

   • A propriedade ModelState.IsValid é usada para determinar se a entrada do usuário é válida.
     • As regras de validação são inferidas a partir de atributos (como Required e Range) da classe Pizza em Models\Pizza.cs.
     • Se a entrada do usuário for inválida, o método Page será chamado para renderizar a página novamente.
   • A propriedade NewPizza é usada para adicionar uma nova pizza ao objeto _service.
   • O método RedirectToAction é usado para redirecionar o usuário para o manipulador de página Get, que renderizará novamente a página com a lista de pizzas atualizada.

3. Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.

4. Retorne ao terminal que executa dotnet watch e 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.

1. 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:

   • O atributo asp-validation-summary é usado para exibir erros de validação para todo o modelo.
   • Cada campo de formulário (elementos <input> e <select>) e cada <label> é associado à propriedade NewPizza correspondente utilizando o atributo asp-for.
   • O atributo asp-validation-for é utilizado para exibir qualquer erro de validação para cada campo do formulário.
   • O método @Html.DisplayNameFor é usado para exibir o nome de exibição da propriedade IsGlutenFree. Esse é um método auxiliar Razor usado para mostrar o nome de exibição de uma propriedade. Fazer o rótulo dessa maneira garante que a caixa de seleção seja marcada quando o usuário clicar no rótulo.
   • Um botão de envio chamado Create foi 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.

2. No final 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.

3. Salve o arquivo. No navegador, a página Lista de Pizzas é 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.

   

4. Insira uma nova pizza e selecione o botão Criar. A página deve ser atualizada e exibir a nova pizza na lista.

Adicionar um manipulador de página para excluir pizzas

Há uma última parte a ser adicionada à página Lista de Pizzas: um manipulador de página para excluir pizzas. Os botões para excluir pizzas já estão na página, mas ainda não fazem nada.

1. Em Pages\PizzaList.cshtml.cs, adicione o seguinte método à classe PizzaListModel:

   public IActionResult OnPostDelete(int id)
   {
       _service.DeletePizza(id);
   
       return RedirectToAction("Get");
   }
   

   No código anterior:

   • O método OnPostDelete é chamado quando o usuário clica no botão Excluir para uma pizza.
     • A página sabe que deve usar esse método porque o atributo asp-page-handler no botão Excluir em Pages\PizzaList.cshtml está definido como Delete.
   • O parâmetro id é usado para identificar a pizza a ser excluída.
     • O parâmetro id está associado ao valor da rota id na URL. Isso é feito com o atributo asp-route-id no botão Excluir em Pages\PizzaList.cshtml.
   • O método DeletePizza é chamado no objeto _service para excluir a pizza.
   • O método RedirectToAction é usado para redirecionar o usuário para o manipulador de página Get, que renderizará novamente a página com a lista de pizzas atualizada.

2. Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.

3. 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 Razor Page que exibe uma lista de pizzas, permite que o usuário adicione novas pizzas e também permite que o usuário exclua pizzas.

Verificar seu conhecimento

1.

Qual método você usaria para manipular o envio de formulário em um PageModel?

Use um método OnPost (ou OnPostAsync).

Use um método OnGet.

Use DataAnnotation para manipular envios de formulário.

É necessário responder a todas as perguntas antes de verificar o trabalho.