0

Entendendo o padrão MVC com .Net Core 3.1

R
Rodrigo Stramantinoli

O que vamos criar?


Um simples aplicativo com a arquitetura MVC (Models, Views e Controllers), demonstrando a relação entre cada componente.


Para este projeto utilizaremos a versão 3.1 do .Net Core.


Criando o projeto


Vamos rodar o seguinte comando:

dotnet new mvc --name Teste --output Teste


Com este comando, definimos o template do projeto que iremos criar (mvc), o nome do projeto através do "--name" e o nome da pasta onde ficará o projeto através do "--output"


Agora abra o projeto em seu editor de texto preferido e bora!


Ao abrir o projeto ...


Vemos algumas pastas com nomes já conhecidos anteriormente, de maneira geral:


  • Controllers - Servem para definir as regras de negócio


  • Models - Modelos de objetos com os quais iremos trabalhar


  • Views - Páginas que serão exibidas**


*As páginas, geralmente escritas em HTML, nesse caso, ao utilizarmos .Net Core, é preferível que utilizemos a sintaxe Razor, que podemos entender como uma mistura entre HTML e C#. Com isso conseguimos dinamizar com mais facilidade nossas páginas.


Agora vamos rodar o projeto com o comando:

dotnet run

caso você esteja utilizando o vscode, por exemplo. Caso esteja no visual studio basta clicar em executar.


Ao rodar o projeto, abra a seguinte url no seu navegador: http://localhost:5000.

Você deverá ver a seguinte página:


Entendendo algumas estruturas


Views

Percebemos que existem outras duas pastas: Home e Shared.

Na pasta Home, temos os arquivos Index.cshtml e Privacy.cshtml que são respectivos às páginas exibidas no início da aplicação. Porém, ao verificarmos os dois arquivos, percebemos (além da sintaxe Razor - C# + HTML) que o arquivo não possui uma tag <html> nem <body>, que são necessárias para inicializar um arquivo .html comum, que será explicado posteriormente.


Na pasta Shared, vemos 3 arquivos:


- _Layout.cshtml - O Arquivo html completo, possuindo um header que é mostrado em ambas páginas, Index e Privacy. Caso já tenha entendido o ponto aqui, ótimo! Se não eu explico, o arquivo _Layout.cshtml é o que serve como template, para outras páginas, ou seja, é por isso que as páginas Index e Privacy possuem o mesmo menu (cabeçalho da página), pois utilizam este mesmo template. Quando temos uma parte do código que precisa ser replicada várias vezes, é uma boa prática utilizar essa abordagem, uma vez que não precisamos repetir linha idênticas, tornando seu código mais semântico.


"Mas como o conteúdo da página muda, se o arquivo é o mesmo?" - Através do Método @RenderBody(), conseguimos definir que naquele "local", o conteúdo será renderizado e todo o resto será reutilizado, é por isso que os arquivo Index.cshtml e Privacy.cshtml não precisam possuir as "tags essenciais" (<html> e <body>), pois essas serão reutilizadas!


_ValidationScriptsPartial.cshtml - Contém scripts JavaScript que são necessários para o funcionamento da aplicação.


Error.cshtml - Quando algum erro acontece, essa página é chamada, indicando o local do erro.


Controllers

A pasta controller é a camada de regra de negócio da nossa aplicação, onde definimos o que pode ou não acontecer em nosso site.

Por padrão, vemos que no arquivo HomeController.cs já existem alguns métodos referentes às páginas da nossa aplicação, como a Index(), Privacy() e Error(), todos do tipo IActionResult, o que significa que são Views (páginas), uma vez que como resultado retornam uma View().

Agora vamos começar criando uma nova página para entender o funcionamento de um controller, chamada "Teste", sendo necessário criar apenas o seguinte método:

public IActionResult Teste(){ 
  return View(); 
}


*A ordem dos métodos não influenciam nesse caso por se tratarem apenas de páginas.


Agora iremos criar na pasta Views/Home um arquivo chamado Teste.cshtml com o seguinte conteúdo: 

*.cshtml devido à sintaxe razor!


@{ 
    ViewData["Title"] = "Teste"; 
} 

<div> 
    <h1> Oi! Sou uma página de Teste :D </h1> 
</div>


*Note que o arquivo a ser criado deve ter o mesmo nome do método criado anteriormente, caso contrário, o controller não achará a View desejada, fazendo surgir um erro.

Também, é necessário que a view seja criada dentro da pasta Home, uma vez que estamos utilizando somente este controller, por enquanto.


Por fim, para conseguirmos testar a página e ver se tudo está funcionando como deveria, vamos adicioná-la no menu no arquivo _Layout.cs.


Dentro da tag <ul>, criaremos uma tag <li> e em seguida uma tag <a>, com alguns atributos exclusivos do .Net:

<li class="nav-item"> 
   <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Teste">Teste </a> 
</li>


  • asp-controller: refere-se ao respectivo controller da view. Este atributo é muito utilizado, principalmente quando temos views com nomes iguais, porém de diferentes controllers.


  • asp-action: refere-se ao nome da página.


a tag <ul> deve ficar assim:

<ul class="navbar-nav flex-grow-1"> 
    <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index"> Home </a> 
    </li> 
    <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> 
    </li> 
    <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Teste">Teste</a> 
    </li> 
</ul>


Se executarmos o projeto agora, já podemos notar que no menu apareceu nosso link e nossa página ficou assim: 


Bônus:

Note que ao abrir essa página, o endereço do site (URL), deve ficar mais ou menos assim: localhost:5000/Home/Teste e quando mudamos para página Privacy, o mesmo acontece, porém ao clicar na Home, somente nosso endereço local (localhost:5000) aparece e o Index não.


Por quê isso acontece?


Isso acontece pois quando nomeamos uma página como Index, trata-se de um padrão já estabelecido de que essa página será a principal, ou seja, a primeira a página a ser vista pelo usuário em nossa aplicação, nossa Home.

Em nosso caso, quando nomeamos uma página como Index, significa que quando passarmos somente o controller, sem a especificação de uma página, a página chamada será a Index, como é nesse caso: localhost:5000/Home/ = localhost:5000/Home/Index.

0
0

Comentários (2)

1
Cássio Patrizzi

Cássio Patrizzi

02/06/2021 09:51

Legal!! Tb estou no início da minha carreira e uma das linguagens que me foi sugerida foi a .NET. Estou introduzindo no Java e logo vou buscar conhecimentos a respeito. Aproveitando este artigo tb.

2
Cintia Viana

Cintia Viana

01/06/2021 22:56

Estou começando no mundo das linguagens de programação. Em breve quero poder rodar este aplicativo. Obrigada por compartilhar.

None

Brasil