Exercício – Adicionar uma nova página do Razor

  • 10 minutos

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

Criar a página Lista de Pizzas

Para criar uma nova página do Razor, irá utilizar a CLI do .NET.

  1. Uma vez que o terminal está bloqueado pelo dotnet watch comando, abra outro terminal ao clicar com o botão direito do rato na pasta ContosoPizza no Explorador e selecione Abrir no Terminal Integrado.

  2. Na nova janela do terminal, introduza o seguinte comando:

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    O comando anterior:

    • Cria estes dois ficheiros no ContosoPizza.Pages espaço de nomes:
      • PizzaList.cshtml - a página do Razor
      • PizzaList.cshtml.cs - a classe que o acompanha PageModel
    • Armazena ambos os ficheiros no subdiretó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 🍕";

    Isto define o <title> elemento para a página.

  4. No final do ficheiro, adicione o seguinte código:

    <h1>Pizza List 🍕</h1>

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

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

    Esta ação adiciona um cabeçalho à página, bem como dois marcadores de posição de comentário HTML para a funcionalidade que irá adicionar mais tarde.

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

  6. Regresse ao terminal em execução dotnet watch e prima Ctrl+R para recarregar a aplicação e detetar os novos ficheiros.

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

Esta seria uma boa altura para testar a página, mas não é possível aceder à página no browser porque ainda não está ligada no menu de navegação. Irá ligá-lo agora.

  1. Abra Pages/Shared/_Layout.cshtml.

  2. <ul> No elemento com a navbar-nav classe (começa na linha 21), tenha em atenção os <li> elementos que contêm as ligações para as páginas Base e Privacidade. Adicione o seguinte código ao final da lista, depois do <li> elemento que contém a ligação Privacidade :

    <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>

    Esta ação adiciona uma ligação para a página PizzaList ao menu de navegação.

  3. Guarde o ficheiro. O separador do browser com a aplicação é atualizado automaticamente para apresentar as alterações. Se estiver a utilizar o GitHub Codespaces, o ficheiro é guardado automaticamente, mas terá de atualizar o separador do browser manualmente.

  4. Selecione a ligação Lista 🍕 de Pizzas no menu de navegação. É apresentada a página Lista de Pizzas.

Registar a classe PizzaService com o contentor de injeção de dependências

A página Lista de Pizzas depende do PizzaService objeto para obter a lista de pizzas. Irá utilizar a injeção de dependências para fornecer o PizzaService objeto à página. Primeiro, registe a PizzaService classe no contentor.

  1. Abra o Program.cs.

  2. Na secção que adiciona serviços ao contentor, adicione o seguinte código:

    builder.Services.AddScoped<PizzaService>();

    Este código regista a PizzaService classe com o contentor de injeção de dependências. O AddScoped método indica que deve ser criado um novo PizzaService objeto para cada pedido HTTP. Agora, o PizzaService pode ser injetado em qualquer página do Razor.

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

Apresentar uma lista de pizzas

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

  1. Abra Pages/PizzaList.cshtml.cs.

  2. Adicione as seguintes using instruções à parte superior do ficheiro:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Estas instruções importam os Pizza tipos e PizzaService que irá utilizar na página.

  3. Dentro do bloco de ContosoPizza.Pages espaço de nomes, substitua toda PizzaListModel a classe 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:

    • É criado um PizzaService nome _service só de leitura privado. Esta variável irá conter uma referência a um PizzaService objeto.
      • A readonly palavra-chave indica que o valor da _service variável não pode ser alterado depois de ser definido no construtor.
    • Uma PizzaList propriedade é definida para conter a lista de pizzas.
      • O IList<Pizza> tipo indica que a PizzaList propriedade irá conter uma lista de Pizza objetos.
      • PizzaList é inicializado para default! indicar ao compilador que será inicializado mais tarde, pelo que não são necessárias verificações de segurança nulas.
    • O construtor aceita um PizzaService objeto.
      • O PizzaService objeto é fornecido por injeção de dependência.
    • É OnGet definido um método para obter a lista de pizzas do PizzaService objeto e armazená-la na PizzaList propriedade .

    Dica

    Se precisar de ajuda para compreender a segurança nula, consulte Segurança nula em C#.

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

  5. Regresse ao terminal em execução dotnet watch e prima Ctrl+R para recarregar a aplicação com o serviço registado e o novo construtor para PizzaListModel.

Apresentar a lista de pizzas

Agora que a página tem acesso à lista de pizzas, irá utilizar essa lista para apresentar as pizzas na página.

  1. Abra Pages/PizzaList.cshtml.

  2. Substitua o comentário <!-- List of pizzas will go here --> pelo código seguinte:

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

    • É <table> criado um elemento para apresentar a lista de pizzas.
    • É <thead> criado um elemento para manter o cabeçalho da tabela.
    • A @foreach instrução dentro da <tbody> itera sobre a lista de pizzas.
      • A Model propriedade refere-se ao PizzaListModel objeto que foi criado no ficheiro code-behind.
      • A PizzaList propriedade refere-se à PizzaList propriedade que foi definida no ficheiro code-behind.
    • Cada iteração da @foreach instrução cria um <tr> elemento para armazenar os dados da pizza:
      • A sintaxe razor é utilizada para apresentar os dados da pizza nos <td> elementos. Esta sintaxe é utilizada para apresentar as propriedades do Pizza objeto armazenado na pizza variável .
      • Price é formatado com a interpolação de cadeias de carateres C#.
      • Uma expressão ternary é utilizada para apresentar o valor da IsGlutenFree propriedade como "✔️" ou uma célula em branco.
      • É criado um formulário para eliminar a pizza.
        • O asp-page-handler atributo indica que o formulário deve ser submetido para o Delete processador no ficheiro code-behind. Irá criar esse processador numa unidade posterior.
        • O asp-route-id atributo indica que a Id propriedade do Pizza objeto deve ser transmitida para o Delete processador.

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

Captura de ecrã da página Lista de Pizzas com a lista de trabalho.

Bom trabalho! Criou uma página do Razor que apresenta uma lista de pizzas. Na próxima unidade, irá saber mais sobre os programadores de etiquetas e os processadores de páginas.