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 à PizzaListModel classe:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
No código anterior apresentado:
- Uma propriedade nomeada NewPizza é adicionada à PizzaListModel classe.
  - NewPizza é um Pizza objeto.
- O BindProperty atributo é aplicado à NewPizza propriedade.
  - O BindProperty atributo é usado para associar a NewPizza propriedade à página Razor. Quando uma solicitação HTTP POST for feita, a NewPizza propriedade será preenchida com a entrada do usuário.
- A NewPizza propriedade é inicializada para default!.
  - A default! palavra-chave é usada para inicializar a NewPizza propriedade para null. Isso impede que o compilador gere um aviso sobre a NewPizza propriedade não inicializada.
Agora, adicione o manipulador de páginas para HTTP POST. No mesmo arquivo, 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 apresentado:
- A ModelState.IsValid propriedade é usada para determinar se a entrada do usuário é válida.
  - As regras de validação são inferidas de atributos (como Required e Range) na Pizza classe em Models\Pizza.cs.
  - Se a entrada do usuário for inválida, o Page método será chamado para renderizar novamente a página.
- A NewPizza propriedade é usada para adicionar uma nova pizza ao _service objeto.
- O RedirectToAction método é usado para redirecionar o usuário para o Get manipulador de página, que renderizará novamente a página com a lista atualizada de pizzas.
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.
Retorne ao terminal em execução 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.

Abra Pages\PizzaList.cshtml e substitua  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-summary atributo é 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 correspondente NewPizza usando o asp-for atributo.
O asp-validation-for atributo é usado para exibir erros de validação para cada campo de formulário.
O @Html.DisplayNameFor método é usado para exibir o nome de exibição da IsGlutenFree propriedade. 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.

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 à PizzaListModel classe:
```
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-handler atributo no botão Excluir em Pages\PizzaList.cshtml está definido como Delete.
- O id parâmetro é usado para identificar a pizza a ser excluída.
  - O parâmetro id está associado ao valor de rota id na URL. Isso é feito com o asp-route-id atributo no botão Excluir em Pages\PizzaList.cshtml.
- O DeletePizza método é chamado no _service objeto para excluir a pizza.
- O RedirectToAction método é usado para redirecionar o usuário para o Get manipulador de página, que renderizará novamente a página com a lista atualizada de pizzas.
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.

Comentários

Esta página foi útil?

Exercício – Adicionar novo formulário de pizza

Verifique seu conhecimento

Comentários