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.

  1. Como o terminal está bloqueado pelo comando dotnet watch, abra outro terminal clicando com o botão direito do mouse na pasta ContosoPizza no Explorer e selecione Abrir no Terminal Integrado.

  2. 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 Razor Page
      • PizzaList.cshtml.cs: a classe PageModel que o acompanha
    • Armazena os dois arquivos no diretório Páginas do projeto.

  3. 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.

  4. Ao final do arquivo, adicione o seguinte código:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Isso adiciona um título à página, bem como dois espaços reservados para comentários HTML para a funcionalidade que você adicionará posteriormente.

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

  6. Volte ao terminal em execução dotnet watch e selecione Ctrl+R para recarregar o aplicativo e detectar os novos Arquivos.

Adicionar a página Lista de Pizzas ao menu de navegação

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.

  1. Abra Pages/Shared/_Layout.cshtml.

  2. No elemento <ul> com a classe navbar-nav (começa na linha 21), observe os elementos <li> 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 elemento <li> 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 para a página PizzaList ao menu de navegação.

  3. 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.

  4. Selecione o link Lista de Pizzas🍕 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.

  1. Abra Program.cs.

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

  3. 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.

  1. Abra Pages/PizzaList.cshtml.cs.

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

  3. 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 de nulo, confira Segurança de nulo em C#.

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

  5. Volte ao terminal que executa dotnet watch e pressione 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.

  1. Abra Pages/PizzaList.cshtml.

  2. Substitua o comentário <!-- List of pizzas will go here --> 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.

  3. 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 Pizzas com a lista em funcionamento.

Bom 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.