Exercício – Personalizar o projeto

  • 12 minutos

Sua equipe dividiu o trabalho do aplicativo de gerenciamento de estoque de pizza. Seus colegas de equipe criaram o aplicativo Web ASP.NET Core para você e já criaram um serviço para ler e gravar os dados de pizza em um banco de dados. Você recebeu a incumbência de trabalhar na página Lista de Pizzas, que exibirá uma lista de pizzas e permitirá adicionar novas pizzas ao banco de dados. Começaremos fazendo um tour pelo projeto para entender como ele está organizado.

Observação

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

Obter os arquivos de projeto

Se você está usando o GitHub Codespaces, basta abrir o repositório no navegador, selecionar Código e criar um codespace no branch main.

Se você não está usando o GitHub Codespaces, obtenha os arquivos de projeto e abra-os no Visual Studio Code seguindo estas 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 diretório mslearn-create-razor-pages-aspnet-core e abra o projeto no Visual Studio Code:

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

Dica

Se você tem um runtime de contêiner compatível instalado, pode usar a extensão Dev Containers para abrir o repositório em um contêiner com as ferramentas pré-instaladas.

Revisar o trabalho de seus colegas

Vamos nos familiarizar com o código existente na pasta ContosoPizza. O projeto é um aplicativo Web ASP.NET Core criado usando o comando dotnet new webapp. As alterações feitas por seus colegas são descritas abaixo.

Dica

Não gaste muito tempo revisando-as. Seus colegas já fizeram o trabalho de criar o banco de dados e o serviço para ler e gravar pizzas no banco de dados, mas não fizeram nenhuma alteração na interface do usuário. Você criará uma interface do usuário que consome o serviço na próxima unidade.

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

O Entity Framework Core também gerou algumas coisas:

  • Uma pasta Migrações foi gerada.
    • A pasta de migrações contém o código para criar o esquema de banco de dados.
  • O arquivo de banco de dados SQLite ContosoPizza.db foi gerado.
    • Se você tem a extensão SQLite instalada (ou está usando o GitHub Codespaces), pode exibir o banco de dados clicando com o botão direito do mouse no arquivo e selecionando Abrir Banco de Dados. O esquema de banco de dados é mostrado na guia SQLite Explorer do painel Explorer.

Revisar a estrutura do projeto Razor Pages

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

Nome Descrição
Pages/ Contém Razor Pages e os arquivos de suporte. Cada página Razor tem um arquivo .cshtml e um arquivo 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.
Module.vb Serve como o ponto de entrada do aplicativo e configura o comportamento dele, como o roteamento.

Outras observações em destaque:

  • Arquivos de página Razor e o arquivo de classe PageModel emparelhado a eles

    As páginas Razor são armazenadas no diretório Páginas. Conforme mencionado anteriormente, cada página Razor tem um arquivo .cshtml e um arquivo 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 sua página Razor.

  • A estrutura e o roteamento de solicitações do diretório Páginas

    O Razor Pages usa a estrutura do diretório Páginas como convenção para o roteamento de solicitações. A seguinte tabela mostra como as URLs são mapeadas para nomes de arquivo:

    URL Mapeada para a 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

    Subpastas no diretório Páginas são usadas para organizar as páginas Razor. Por exemplo, se houvesse um diretório Pages/Products, as URLs refletiriam esta estrutura:

    URL Mapeada para a 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

    Vários arquivos são compartilhados em várias páginas. Eles determinam elementos de layout comuns e importações de página. A tabela a seguir descreve a finalidade de cada arquivo.

    Arquivo Descrição
    _ViewImports.cshtml Importa namespaces e classes usados em várias páginas.
    _ViewStart.cshtml Especifica o layout padrão de todas as páginas Razor.
    Pages/Shared/_Layout.cshtml Esse é o layout especificado pelo arquivo _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 executar o projeto para 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 do terminal no contexto da pasta do projeto.

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

    dotnet watch

    Esse comando:

    • Compila o projeto.
    • Inicia o aplicativo.
    • Inspeciona alterações de arquivo e reinicia o aplicativo quando detecta uma alteração.

  3. O IDE solicita que você abra o aplicativo em um navegador. Selecione Abrir no Navegador.

    Dica

    Você também pode abrir o aplicativo localizando a URL na janela do terminal. Mantenha Ctrl pressionado e clique na URL para abri-la em um navegador.

  4. Compare a home page renderizada com Pages/Index.cshtml no IDE:

    • Observe a combinação de códigos HTML, Sintaxe Razor e C# no arquivo.
      • A sintaxe Razor é indicada por caracteres @.
      • O código C# está entre blocos @{ }. Observe as diretivas na parte superior do arquivo:
      • A diretiva @page especifica que esse arquivo é uma página Razor.
      • A diretiva @model especifica o tipo de modelo da página (nesse caso, IndexModel, que é definido em Pages/Index.cshtml.cs).
    • Examine o bloco de código C#.
      • O código define o valor do item Title dentro do dicionário ViewData como "Home page".
      • O dicionário ViewData é usado para passar dados entre a página Razor e a classe IndexModel.
      • No runtime, o valor Title é usado para definir o elemento <title> da página.

Deixe o aplicativo em execução na janela do terminal. Nós o usaremos nas próximas unidades. Deixe a guia do navegador com o aplicativo Contoso Pizza em execução também. Você fará alterações no aplicativo e o navegador será atualizado automaticamente para exibi-las.

Personalizar a página de aterrissagem

Vamos fazer algumas alterações na página de aterrissagem para torná-la mais relevante para o aplicativo de pizza.

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

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

    O código anterior:

    • Define o valor do item Title no dicionário ViewData como "A Casa dos Amantes de Pizza".
    • Calcula quanto tempo passou desde que a empresa foi aberta.

  2. Modifique o HTML da seguinte maneira:

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

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

    • Substitua o elemento <p> 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 que a empresa foi aberta.
      • O caractere @ é usado para alternar de HTML para sintaxe Razor.
      • O método Convert.ToInt32 é usado para converter a propriedade TotalDays da variável timeInBusiness em um inteiro.
      • A classe Convert faz parte do namespace System, que é importado automaticamente pelo elemento <ImplicitUsings> no arquivo ContosoPizza.csproj.

  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.

Importante

Fique de olho na janela do terminal com dotnet watch sempre que salvar o arquivo. Às vezes, o código pode conter o que chama de uma edição rude. Isso significa que o código que você alterou não pode ser recompilado sem reiniciar o aplicativo. Se solicitado a reiniciar o aplicativo, pressione y (sim) ou a (sempre). Você sempre pode interromper o aplicativo pressionando Ctrl+C duas vezes na janela do terminal e, em seguida, reiniciá-lo executando dotnet watch novamente.

Você fez as primeiras alterações em uma página Razor! Na próxima unidade, você adicionará uma nova página ao aplicativo para exibir uma lista de pizzas.