Exercício - Personalizar o projeto

  • 12 minutos

Sua equipe dividiu o trabalho para o 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 dados de pizza em um banco de dados. Você foi designado para trabalhar na página Lista de pizzas, que exibirá uma lista de pizzas e permitirá que você adicione novas pizzas ao banco 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, você 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 Código e criar um novo espaço de código 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 .

Gorjeta

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.

Gorjeta

Não gaste muito tempo a rever estas alterações. Seus colegas de equipe já fizeram o trabalho para 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 consumirá o serviço na próxima unidade.

  • Uma pasta Models foi adicionada ao projeto.
    • A pasta 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 do banco 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 bancos de dados.
  • Uma pasta Serviços foi adicionada ao projeto.
    • A pasta services contém uma PizzaService classe que expõe métodos para listar e adicionar pizzas.
    • A PizzaService classe usa a PizzaContext classe para ler e escrever 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:

  • Foi gerada uma pasta Migrations .
    • A pasta migrations contém código para criar o esquema de banco 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 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.

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 dotnet new webapp projeto que foi gerada pelo comando.

Nome Descrição
Páginas/ Contém o Razor Pages e ficheiros de suporte. Cada página do 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.
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 seu arquivo de classe emparelhado PageModel

    As páginas Razor são armazenadas no diretório Pages . Como observado acima, cada página do Razor tem um arquivo .cshtml e um arquivo de classe .cshtml.csPageModel . A PageModel classe 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 de diretórios do Pages e as solicitações de roteamento

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

    URL Mapas para a página Razor
    www.domain.com Páginas/Index.cshtml
    www.domain.com/Index Páginas/Index.cshtml
    www.domain.com/Privacy Páginas/Privacy.cshtml
    www.domain.com/Error Páginas/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 Mapas para a página Razor
    www.domain.com/Products Páginas/Produtos/Index.cshtml
    www.domain.com/Products/Index Páginas/Produtos/Index.cshtml
    www.domain.com/Products/Create Páginas/Produtos/Create.cshtml

  • Layout e outros arquivos compartilhados

    Há vários arquivos que são compartilhados 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 Description
    _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.
    Páginas/compartilhado/_Layout.cshtml Este é o layout especificado pelo _ViewStart.cshtml arquivo. Implementa elementos de layout comuns em várias páginas.
    Páginas/Compartilhado/_ValidationScriptsPartial.cshtml Fornece funcionalidade de validação para todas as páginas.

Executar o projeto pela primeira vez

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

    • Constrói o projeto.
    • Inicia o aplicativo.
    • Observa alterações de arquivo e reinicia o aplicativo quando ele deteta uma alteração.

  3. O IDE solicita que você abra o aplicativo em um navegador. Selecione Open in Browser (Abrir no Browser).

    Gorjeta

    Você também pode abrir o aplicativo encontrando o URL na janela do terminal. Mantenha pressionada a tecla Ctrl e clique no URL para abri-lo em um 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 da navalha é indicada por @ caracteres.
      • O código C# é incluído em @{ } blocos. Tome nota das diretivas no topo do ficheiro:
      • A @page diretiva especifica que esse arquivo é 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 Title valor do item dentro do ViewData dicionário 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 Title valor é usado para definir o elemento da <title> página.

Deixe o aplicativo em execução na janela do terminal. Vamos usá-lo 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 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 o aplicativo 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 Convert.ToInt32 método é usado para converter a TotalDaystimeInBusiness propriedade da variável em um 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 sempre dotnet watch que guardar o seu ficheiro. Às vezes, seu código pode conter o que ele chama de edição rude. 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.

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