Anterior

Seguinte

Exercício – Adicionar novo formulário de pizza

Concluído

Nesta unidade, irá terminar a página Lista de Pizzas ao adicionar um formulário para criar novas pizzas. Também irá adicionar processadores de páginas para processar a submissão e eliminação de pizzas no formulário.

Adicionar um formulário para criar novas pizzas

Vamos começar por adicionar propriedades à PizzaListModel classe para representar a entrada do utilizador. Também irá adicionar o processador de páginas adequado.

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

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

   No código anterior:

   • É adicionada uma propriedade com o nome NewPizza à PizzaListModel classe .
     • NewPizza é um Pizza objeto.
   • O atributo BindProperty é aplicado à propriedade NewPizza.
     • O BindProperty atributo é utilizado para vincular a NewPizza propriedade à página do Razor. Quando é feito um pedido HTTP POST, a NewPizza propriedade será preenchida com a entrada do utilizador.
   • A NewPizza propriedade é inicializada para default!.
     • A default! palavra-chave é utilizada para inicializar a NewPizza propriedade para null. Isto impede que o compilador gere um aviso sobre a NewPizza propriedade ser não inicializada.

2. Agora, adicione o processador de páginas para HTTP POST. No mesmo ficheiro, adicione o seguinte método à PizzaListModel classe :

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

   No código anterior:

   • A ModelState.IsValid propriedade é utilizada para determinar se a entrada do utilizador é válida.
     • As regras de validação são inferidas a partir de atributos (como Required e Range) na Pizza classe em Models\Pizza.cs.
     • Se a entrada do utilizador for inválida, o Page método é chamado para voltar a compor a página.
   • A NewPizza propriedade é utilizada para adicionar uma nova pizza ao _service objeto.
   • O RedirectToAction método é utilizado para redirecionar o utilizador para o Get processador de páginas, que irá compor novamente a página com a lista atualizada de pizzas.

3. Guarde o ficheiro. Se estiver a utilizar o GitHub Codespaces, o ficheiro é guardado automaticamente.

4. Regresse ao terminal em execução dotnet watch e prima Ctrl+R para recarregar a aplicação.

Agora que existe um processador de páginas para processar a submissão do formulário, vamos adicionar o formulário à Página do Razor.

1. Abra Pages\PizzaList.cshtml e substitua pelo <!-- New Pizza form will go here --> 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 asp-validation-summary atributo é utilizado para apresentar erros de validação para todo o modelo.
   • Cada campo de formulário (<input> e <select> elementos) e cada um <label> está vinculado à propriedade correspondente NewPizza com o asp-for atributo .
   • O asp-validation-for atributo é utilizado para apresentar quaisquer erros de validação para cada campo de formulário.
   • O @Html.DisplayNameFor método é utilizado para apresentar o nome a apresentar da IsGlutenFree propriedade . Este é um método auxiliar do Razor que é utilizado para apresentar o nome a apresentar de uma propriedade. Ao fazer a etiqueta desta forma, garante que a caixa de verificação está selecionada quando o utilizador clica na etiqueta.
   • É adicionado um botão submeter etiquetado Create ao formulário para publicar os dados do formulário no servidor. No runtime, quando o utilizador seleciona este botão Criar , o browser envia o formulário como um pedido HTTP POST para o servidor.

2. Na parte inferior da página, adicione o seguinte código:

   @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   }
   

   Esta ação injeta os scripts de validação do lado do cliente na página. Os scripts de validação do lado do cliente são utilizados para validar a entrada do utilizador antes de o formulário ser submetido para o servidor.

3. Guarde o ficheiro. No browser, a página Lista de Pizzas é atualizada com o novo formulário. Se estiver a utilizar o GitHub Codespaces, o ficheiro é guardado automaticamente, mas terá de atualizar o separador do browser manualmente.

   

4. Introduza uma nova pizza e selecione o botão Criar . A página deve atualizar e apresentar a nova pizza na lista.

Adicionar um processador de páginas para eliminar pizzas

Existe uma última peça a adicionar à página Lista de Pizzas: um processador de páginas para eliminar pizzas. Os botões para eliminar pizzas já estão na página, mas ainda não fazem nada.

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

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

   No código anterior:

   • O OnPostDelete método é chamado quando o utilizador clica no botão Eliminar para uma pizza.
     • A página sabe como utilizar este método porque o asp-page-handler atributo no botão Eliminar em Pages\PizzaList.cshtml está definido como Delete.
   • O id parâmetro é utilizado para identificar a pizza a eliminar.
     • O id parâmetro está vinculado ao valor da id rota no URL. Isto é conseguido com o asp-route-id atributo no botão Eliminar em Pages\PizzaList.cshtml.
   • O DeletePizza método é chamado no _service objeto para eliminar a pizza.
   • O RedirectToAction método é utilizado para redirecionar o utilizador para o Get processador de páginas, que irá compor novamente a página com a lista atualizada de pizzas.

2. Guarde o ficheiro. Se estiver a utilizar o GitHub Codespaces, o ficheiro é guardado automaticamente.

3. Teste o botão Eliminar para uma pizza. A página deve ser atualizada e a pizza selecionada deve ser removida da lista.

Parabéns! Criou com êxito uma Página do Razor que apresenta uma lista de pizzas, permite ao utilizador adicionar novas pizzas e também permite que o utilizador elimine pizzas.

Verifique o seu conhecimento

1.

Que método utilizaria para processar a submissão de formulários num PageModel?

Utilize um OnPost método (ou OnPostAsync) .

Utilize um OnGet método .

Utilize um DataAnnotation para processar a submissão de formulários.

Tem de responder a todas as questões antes de verificar o seu trabalho.

Continuar