Exercício – Adicionar uma nova página Razor

10 minutos

Na unidade anterior, você obteve o código-fonte do projeto Contoso Pizza e fez algumas alterações simples na home page. Nesta unidade, você adicionará uma nova página Razor ao projeto.

Criar a página Lista de Pizzas

Para criar uma página Razor, você usará a CLI do .NET.

Como o terminal é bloqueado pelo dotnet watch comando, abra outro terminal clicando com o botão direito do mouse na pasta ContosoPizza no Explorer e selecione Abrir no Terminal Integrado.
Na nova janela do terminal, insira o comando a seguir:
```
dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
```
O comando anterior:
- Cria esses dois arquivos no namespace ContosoPizza.Pages:
  - PizzaList.cshtml - a página do Razor
  - PizzaList.cshtml.cs - a classe que PageModel acompanha
- Armazena os dois arquivos no subdiretório Pages do projeto.
Em Pages/PizzaList.cshtml, adicione o seguinte código dentro do @{ } bloco de código:
```
ViewData["Title"] = "Pizza List 🍕";
```
Isso define o elemento <title> da página.
Ao final do arquivo, adicione o seguinte código:
```
<h1>Pizza List 🍕</h1>




```
Isso adiciona um título à página, bem como dois espaços reservados para comentários HTML para a funcionalidade que você adicionará posteriormente.
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.
Retorne ao terminal em execução dotnet watche selecione Ctrl+R para recarregar o aplicativo e detectar os novos arquivos.

Esse seria um bom momento para testar a página, mas a página não pode ser acessada no navegador porque ainda não está vinculada ao menu de navegação. Você o vinculará agora.

Abrir Páginas/Compartilhado/_Layout.cshtml.
<ul> No elemento com a navbar-nav classe (começa na linha 21), observe os <li> elementos que contêm os links para as páginas Página Inicial e privacidade. Adicione o seguinte código ao final da lista, após o <li> elemento que contém o link Privacidade :
```
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>
```
Isso adiciona um link à página PizzaList ao menu de navegação.
Salve o arquivo. A guia do navegador com o aplicativo é atualizada automaticamente para exibir as alterações. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente, mas você precisa atualizar a guia do navegador manualmente.
Selecione o link da Lista 🍕 de Pizza no menu de navegação. A página Lista de Pizzas é exibida.

Registrar a classe PizzaService no contêiner de injeção de dependência

A página Pizza List depende do objeto PizzaService para recuperar a lista de pizzas. Você usará a injeção de dependência para fornecer o objeto PizzaService à página. Primeiro, registre a classe PizzaService com o contêiner.

Abra Program.cs.
Na seção que adiciona serviços ao contêiner, adicione o seguinte código:
```
builder.Services.AddScoped<PizzaService>();
```
Esse código registra a classe PizzaService no contêiner de injeção de dependência. O método AddScoped indica que um objeto PizzaService precisa ser criado para cada solicitação HTTP. Agora, o PizzaService pode ser injetado em qualquer página Razor.
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.

Exibir uma lista de pizzas

Vamos modificar a classe PageModel da página Lista de Pizzas para recuperar a lista de pizzas do objeto PizzaService e armazená-la em uma propriedade.

Abrir Páginas/PizzaList.cshtml.cs.
Adicione as seguintes instruções using à parte superior do arquivo:
```
using ContosoPizza.Models;
using ContosoPizza.Services;
```
Essas instruções importam os tipos Pizza e PizzaService que você usará na página.
Dentro do bloco do namespace ContosoPizza.Pages, substitua toda a classe PizzaListModel pelo seguinte código:
```
public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}
```
No código anterior:
- Um PizzaService somente leitura privado chamado _service é criado. Essa variável conterá uma referência a um objeto PizzaService.
  - A palavra-chave readonly indica que o valor da variável _service não pode ser alterado após ser definido no construtor.
- Uma propriedade PizzaList é definida para manter a lista de pizzas.
  - O tipo IList<Pizza> indica que a propriedade PizzaList conterá uma lista de objetos Pizza.
  - PizzaList é inicializado para default! a fim de indicar ao compilador que ele será inicializado posteriormente, portanto, verificações de segurança nulas não são necessárias.
- O construtor aceita um objeto PizzaService.
  - O objeto PizzaService é fornecido pela injeção de dependência.
- Um método OnGet é definido para recuperar a lista de pizzas do objeto PizzaService e armazená-la na propriedade PizzaList.
Dica

Se você precisar de ajuda para entender a segurança nula, consulte a segurança nula em C#.
Salve o arquivo. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente.
Volte ao terminal que executa dotnet watch e clique em Ctrl+R para recarregar o aplicativo com o serviço registrado e o novo construtor para PizzaListModel.

Exibir a lista de pizzas

Agora que a página tem acesso à lista de pizzas, você usará essa lista para exibir as pizzas na página.

Abrir Páginas/PizzaList.cshtml.
Substitua o comentário  pelo seguinte código:
```
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>
```
No código anterior:
- Um elemento <table> é criado para exibir a lista de pizzas.
- Um elemento <thead> é criado para conter o cabeçalho da tabela.
- A instrução @foreach dentro do <tbody> itera na lista de pizzas.
  - A propriedade Model refere-se ao objeto PizzaListModel que foi criado no arquivo code-behind.
  - A propriedade PizzaList refere-se à propriedade PizzaList que foi definida no arquivo code-behind.
- Cada iteração da instrução @foreach cria um elemento <tr> para armazenar os dados de pizza:
  - A sintaxe Razor é usada para exibir os dados de pizza nos elementos <td>. Essa sintaxe é usada para exibir as propriedades do objeto Pizza armazenado na variável pizza.
  - Price é formatado usando a interpolação de cadeias de caracteres em C#.
  - Uma expressão ternária é usada para exibir o valor da propriedade IsGlutenFree como "✔️" ou uma célula em branco.
  - Um formulário é criado para excluir a pizza.
    - O atributo asp-page-handler indica que o formulário deve ser enviado ao manipulador Delete no arquivo code-behind. Você criará esse manipulador em uma unidade posterior.
    - O atributo asp-route-id indica que a propriedade Id do objeto Pizza deve ser passada para o manipulador Delete.
Salve o arquivo. No navegador, a página Lista de Pizzas é atualizada com a lista de pizzas. Se você está usando o GitHub Codespaces, o arquivo é salvo automaticamente, mas você precisa atualizar a guia do navegador manualmente.

Captura de tela da página Lista de Pizza com a lista de trabalho.

Ótimo trabalho! Você criou uma página Razor que exibe uma lista de pizzas. Na próxima unidade, você aprenderá sobre auxiliares de marca e manipuladores de página.

Comentários

Esta página foi útil?