Exercício - Personalizar o projeto

  • 12 minutos

A sua equipa dividiu o trabalho para a aplicação de gestão de inventário de pizzas. Os seus colegas de equipa criaram a aplicação Web ASP.NET Core para si e já criaram um serviço para ler e gravar dados de pizza numa base de dados. Foi-lhe atribuída a tarefa de trabalhar na página Lista de pizzas, que exibirá uma lista de pizzas e permitirá adicionar novas pizzas à base de dados. Começaremos fazendo um tour pelo projeto para entender como ele está organizado.

Nota

Este módulo usa a CLI do .NET (interface de linha de comando) e o Visual Studio Code para desenvolvimento local. Depois de concluir este módulo, pode aplicar os conceitos usando o Visual Studio (Windows) ou continuar o desenvolvimento usando o Visual Studio Code (Windows, Linux e macOS).

Obter os arquivos do projeto

Se você estiver usando o GitHub Codespaces, basta abrir o repositório no navegador, selecionar Code e criar um novo codespace na main ramificação.

Se você não estiver usando o GitHub Codespaces, obtenha os arquivos de projeto e abra-os no Visual Studio Code com as seguintes etapas:

  1. Abra um shell de comando e clone o projeto do GitHub usando a linha de comando:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Navegue até o mslearn-create-razor-pages-aspnet-core diretório e abra o projeto no Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Dica

Se você tiver um tempo de execução de contêiner compatível instalado, poderá usar a extensão Dev Containers para abrir o repositório em um contêiner com as ferramentas pré-instaladas.

Reveja o trabalho dos seus colegas de equipa

Vamos reservar um momento para nos familiarizarmos com o código existente na pasta ContosoPizza. O projeto é um aplicativo Web ASP.NET Core criado usando o dotnet new webapp comando. As alterações feitas pelos seus colegas de equipa estão descritas abaixo.

Dica

Não gaste muito tempo a rever estas alterações. Os teus colegas de equipa já fizeram o trabalho para criar a base de dados e o serviço para ler e gravar pizzas na base de dados, mas não fizeram nenhuma alteração na interface do utilizador. Você criará uma interface do utilizador que consumirá o serviço deles no próximo módulo.

  • Uma pasta Models foi adicionada ao projeto.
    • A pasta do modelo contém uma Pizza classe que representa uma pizza.
  • Uma pasta Data foi adicionada ao projeto.
    • A pasta de dados contém uma PizzaContext classe que representa o contexto da base de dados. Ele herda da DbContext classe no Entity Framework Core. O Entity Framework Core é um mapeador objeto-relacional (ORM) que facilita o trabalho com bases de dados.
  • Uma pasta Serviços foi adicionada ao projeto.
    • A pasta de serviços contém uma PizzaService classe que expõe métodos para listar e adicionar pizzas.
    • A classe PizzaService usa a classe PizzaContext para ler e escrever pizzas na base de dados.
    • A classe é registada para injeção de dependência em Program.cs (linha 10).

O Entity Framework Core também gerou algumas coisas:

  • Foi gerada uma pasta Migrations.
    • A pasta migrations contém código para criar o esquema da base de dados.
  • O arquivo de banco de dados SQLite ContosoPizza.db foi gerado.
    • Se você tiver a extensão SQLite instalada (ou estiver usando o GitHub Codespaces), poderá visualizar a base de dados clicando com o botão direito do rato no ficheiro e selecionando Abrir Base de Dados. O esquema da base de dados é mostrado no separador SQLite Explorer do painel Explorer.

Revise a estrutura do projeto Razor Pages

Todo o resto no projeto permanece inalterado desde quando o projeto foi criado. A tabela a seguir descreve a estrutura do projeto que foi gerada pelo comando dotnet new webapp.

Nome Descrição
Páginas/ Contém o Razor Pages e ficheiros de suporte. Cada página do Razor tem um ficheiro .cshtml e um ficheiro de classe .cshtml.csPageModel.
wwwroot/ Contém arquivos de ativos estáticos como HTML, JavaScript e CSS.
ContosoPizza.csproj Contém metadados de configuração do projeto, como dependências.
Program.cs Serve como ponto de entrada do aplicativo e configura o comportamento do aplicativo, como roteamento.

Outras observações dignas de nota:

  • Arquivos de página Razor e os respetivos ficheiros de classe emparelhados PageModel

    As páginas Razor são armazenadas no diretório Pages . Como observado acima, cada página do Razor tem um ficheiro .cshtml e um ficheiro de classe .cshtml.csPageModel. A classe PageModel permite a separação da lógica e da apresentação de uma página Razor, define manipuladores de página para solicitações e encapsula propriedades de dados e lógica com escopo para a sua página Razor.

  • A estrutura de diretórios do Pages e os pedidos de encaminhamento

    O Razor Pages usa a estrutura de diretórios Pages como convenção para rotear pedidos. A tabela a seguir mostra como as URLs são mapeadas para nomes de arquivos:

    URL Corresponde à página Razor
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    As subpastas no diretório Pages são usadas para organizar páginas do Razor. Por exemplo, se houvesse um diretório Páginas/Produtos , as URLs refletiriam essa estrutura:

    URL Corresponde à página Razor
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Layout e outros arquivos compartilhados

    Há vários ficheiros que são partilhados em várias páginas. Esses arquivos determinam elementos de layout comuns e importações de página. A tabela a seguir descreve a finalidade de cada arquivo.

    Ficheiro Descrição
    _ViewImports.cshtml Importa namespaces e classes que são usados em várias páginas.
    _ViewStart.cshtml Especifica o layout padrão para todas as páginas do Razor.
    Pages/Shared/_Layout.cshtml Este é o layout especificado pelo ficheiro _ViewStart.cshtml. Implementa elementos de layout comuns em várias páginas.
    Pages/Shared/_ValidationScriptsPartial.cshtml Fornece funcionalidade de validação para todas as páginas.

Executar o projeto pela primeira vez

Vamos iniciar o projeto para que possamos vê-lo em ação.

  1. Clique com o botão direito do mouse na pasta ContosoPizza no Explorer e selecione Abrir no Terminal Integrado. Isso abre uma janela de terminal no contexto da pasta do projeto.

  2. Na janela do terminal, digite o seguinte comando:

    dotnet watch

    Este comando:

    • Compila o projeto.
    • Inicia a aplicação.
    • Observa alterações de arquivo e reinicia a aplicação quando ele deteta uma alteração.

  3. O IDE solicita que abra a aplicação num navegador. Selecione Open in Browser.

    Dica

    Pode também abrir a aplicação encontrando o URL na janela do terminal. Mantenha a tecla Ctrl premida e clique no URL para abri-lo num navegador.

  4. Compare a página inicial renderizada com Pages/Index.cshtml no IDE:

    • Observe a combinação de HTML, sintaxe Razor e código C# no arquivo.
      • A sintaxe Razor é indicada por @ caracteres.
      • O código C# está delimitado por blocos @{ }. Tome nota das diretivas no topo do ficheiro:
      • A diretiva @page especifica que este ficheiro é uma página Razor.
      • A @model diretiva especifica o tipo de modelo para a página (neste caso, IndexModel, que é definido em Pages/Index.cshtml.cs).
    • Analise o bloco de código C#.
      • O código define o valor do item Title no dicionário ViewData como "Página inicial".
      • O ViewData dicionário é usado para passar dados entre a página do Razor e a IndexModel classe.
      • No tempo de execução, o valor Title é usado para definir o elemento <title> da página.

Deixe o aplicativo em execução na janela do terminal. Vamos utilizá-lo nas próximas unidades. Deixe a guia do navegador com o aplicativo Contoso Pizza em execução também. Vai fazer alterações na aplicação e o navegador será atualizado automaticamente para exibir as alterações.

Personalizar a página de destino

Vamos fazer algumas alterações na página de destino para torná-la mais relevante para a aplicação de pizza.

  1. Em Pages/Index.cshtml, substitua o código no bloco de código C# pelo seguinte código:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    O código anterior:

    • Define o Title valor do item dentro do ViewData dicionário como "The Home for Pizza Lovers".
    • Calcula o tempo decorrido desde a abertura da empresa.

  2. Modifique o HTML da seguinte maneira:

    • Substitua o <h1> elemento pelo seguinte código:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Substitua o <p> elemento pelo seguinte código:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    O código anterior:

    • Altera o título para "Bem-vindo à Contoso Pizza".
    • Exibe o número de dias que se passaram desde a abertura da empresa.
      • O @ caractere é usado para alternar de HTML para Razor Syntax.
      • O método Convert.ToInt32 é usado para converter a propriedade TotalDays da variável timeInBusiness num inteiro.
      • A Convert classe faz parte do System namespace, que é importado automaticamente pelo <ImplicitUsings> elemento no arquivo ContosoPizza.csproj .

  3. Guarde o ficheiro. A guia do navegador com o aplicativo é atualizada automaticamente para exibir as alterações. Se você estiver usando o GitHub Codespaces, o arquivo será salvo automaticamente, mas você precisará atualizar a guia do navegador manualmente.

Importante

Fique atento à janela do terminal dotnet watch sempre que guardar o seu ficheiro. Às vezes, o seu código pode conter aquilo a que chama uma edição inadequada. Isso significa que o código alterado não pode ser recompilado sem reiniciar o aplicativo. Se lhe for pedido para reiniciar a aplicação, prima y (sim) ou a (sempre). Você sempre pode parar o aplicativo pressionando Ctrl + C duas vezes na janela do terminal e, em seguida, reiniciá-lo executando dotnet watch novamente.

Fez as suas primeiras alterações numa página Razor! Na próxima unidade, vais adicionar uma nova página à aplicação para exibir uma lista de pizzas.