Neste artigo, vamos explorar a estrutura de um projeto Razor, criar uma WebApp e executar para vermos o modelo.

Razor Pages é um modelo de programação centrado em página (page-centric) do lado do servidor (server-side) para construir UI da web com ASP.NET Core. Os benefícios incluem:

  • Configuração fácil para aplicativos web dinâmicos usando HTML, CSS e C#.

  • Arquivos organizados por recurso para facilitar a manutenção.

  • Combina marcação com código C# do lado do servidor usando a sintaxe Razor.

A sintaxe do Razor combina HTML e C# para definir a lógica de renderização dinâmica. Você pode usar variáveis ​​e métodos C# em sua marcação HTML para gerar conteúdo dinâmico da Web no servidor em tempo de execução. As Razor Pages não substituem HTML, CSS ou JavaScript. Eles são uma forma de combinar essas tecnologias para criar conteúdo web dinâmico.

A Estrurua de um projeto Razor Pages

A tabela a seguir descreve a estrutura do projeto gerada ao criar um novo projeto Razor Pages, como executar o comando dotnet new webapp.

Nome Descrição
Pages/ Contém páginas Razor e arquivos de suporte
wwwroot/ Contém arquivos de ativos estáticos como imagens, HTML, JavaScript e CSS.
.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.

A seguir estão mais informações sobre a estrutura do projeto, roteamento de solicitações e recursos compartilhados:

  • Arquivos de página do Razor e seu arquivo de classe PageModel emparelhado: As páginas do Razor são armazenadas no diretório Pages. Cada página do Razor possui um arquivo .cshtml e um arquivo de classe .cshtml.cs PageModel. 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 (handlers for requests) e encapsula propriedades de dados e lógica com escopo para sua página Razor.

  • A estrutura de diretórios do Pages: O Razor Pages usa a estrutura de diretório do Pages como convenção para solicitações de roteamento. A tabela a seguir mostra como os URLs são mapeados para nomes de arquivos:

URL Mapeamento para a página Razor
www.example.com Pages/Index.cshtml
www.example.com/Index Pages/Index.cshtml
www.example.com/Privacy Pages/Privacy.cshtml
www.example.com/Error Pages/Error.cshtml
  • Layout e outros arquivos compartilhados: Existem vários arquivos compartilhados em várias páginas. Esses arquivos determinam elementos comuns de layout e importações de páginas. A tabela a seguir descreve a finalidade de cada arquivo.
Arquivo Descrição
_ViewImports.cshtml Importa namespaces e classes que são usados ​​em diversas páginas.
_ViewStart.cshtml Especifica o layout padrão para todas as páginas do Razor.
Pages/Shared/_Layout.cshtml 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.

Criando, executando e observando a estrutura de uma aplicação com o modelo WebApp

Como ja mencionado em vários artigos, existem diversas formas para criarmos um projeto .Net Core. Para este artigo, iremos utilizar o modelo WebApp, que já é montado para o fim mencionado no artigo, criar uma aplicação web.

Lembra do comando dotnet new no terminal? Para criarmos nossa aplicação, inicialmente abra o terminal de sua estação ma pasta em que costuma salvar seus repositórios, então digite o comando abaixo, para vermos se o modelo está disponível.

dotnet new list

Um resultado semelhante (mas não necessariamente igual) ao da imagem abaixo irá aparecer, Podemos perceber que temos o modelo disponível, desta forma, seguimos com a criação do projeto. Caso o comando dotnet não seja reconhecido ou o modelo em questão não esteja disponível, temos aqui um artigo aqui explicando melhor dos modelos e será necessário a instalação do framework / sdk. Se já está seguindo a trilha de artigos de .Net deste site, não se preocupe, o modelo estará lá.

wa2.png

Vamos criar nossa aplicação com os comandos abaixo, logo após vamos acessar a pasta criada com a geração da aplicação e entrar com o comando code . para abrirmos nossa solução no visual studio code. Então veremos nossa solução aberta pronta para atuação!

dotnet new webapp --name MinhaPrimeiraWebApp

cd MinhaPrimeiraWebApp/

code .

wa1.png

Executando a aplicação

Vamos executar a aplicação de uma forma mais rápida e após seu início vamos observar a estrutura do projeto. No terminal em seu visual studio code, digite o comando dotnet run e observe o resultado apresentado. O resultado será semelhante ao abaixo, mas não igual, pois a porta de acesso pode ser diferente.

wa3.png

Observando a coluna à esquerda, podemos identificar a estrutura do projeto que estudamos nesse artigo, todos os itens foram expandidos para demonstrar a forma em que o modelo é criado e como o entendimento desta estrutura lhe ajudará a seguir com uma aplicação maior, mais robusta e seguindo o padrão inicial.

E para vermos nosso resultado final, que é a nossa WebApp em execução, vamos obter a partir do log do visual studio code com o resultado da instrução dotnet run (no caso da aplicação deste artigo a porta foi a porta 5171) a porta e acessar através de um navegador que no caso será http://localhost:5171. Teremos um resultado semelhante ao abaixo.

wa5.png

Conclusão

Este artigo apresentou de forma didática a estrutura de um projeto WebApp utilizando o .Net Core. Realizamos também a criação de uma aplicação para praticarmos e de fato vermos o que estamos estudando. Nos próximos artigos iremos mergulhar um pouco mais a fundo, mas fica o convite ao estudo sobre o assunto, que é um oceano a ser desbravado.

Se você gostou do conteúdo, deixe um comentário ou uma reação! Compartilhe com alguém e ajude a divulgar! Um pequeno gesto que faz toda diferença. Por trás deste monitor só existe um profissional com o interesse em compartilhar o pouco que sabe, de forma gratuita e raiz. Aqui você precisará se sentar na frente da máquina, ler e estudar. Vídeos de “how to” existem aos milhares, mas o que de fato aprendemos com isso? Fica a reflexão.

Até a próxima!

[ ]´s Degas.