Já falamos algumas vezes aqui no blog sobre ferramentas que facilitam o desenvolvimento de aplicações web. Hoje vamos mostrar uma pequena introdução ao Razor e como podemos utiliza-lo em integração com nossas aplicações MVC.
Antes de mais nada, precisamos entender sucintamente a arquitetura básica de uma aplicação MVC. 
MVC é um padrão utilizado em aplicações que a separa em 3 camadas:
Model: é a camada de dados da aplicação. Basicamente, é a informação ‘bruta’  do sistema; 
View: é a camada de interface do sistema. É pela View que o usuário conseguirá interagir com a aplicação; 
Controller: é a camada de controle de sua aplicação. Principal responsável pela lógica da aplicação; 
Simplificando, Models  são os dados, Views  são as telas e Controllers as lógicas de negócio que integram a fonte de dados a tela e vice versa.
Após contextualizar rapidamente uma aplicação MVC voltemos ao tópico principal: o que é Razor?
Razor é uma View Engine desenvolvida para aplicações .NET e que foi introduzida a partir da versão 3.0 do ASP.NET MVC. Assim como outras View Engines, ela ajuda a integrar e inserir em sua página HTML linguagem de programação. 
O Razor é uma forma bem simples de inserir e manipular os dados em uma View e até mesmo criar pequenas lógicas na página.
Vamos fazer um simples exemplo, utilizando o Model, View e Controller abaixo:
<figure id="attachment_540" aria-describedby="caption-attachment-540" style="width: 458px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/ModeloExemplo.jpg"><img fetchpriority="high" decoding="async" class="wp-image-540 " src="https://dtidigital.com.br/wp-content/uploads/2015/11/ModeloExemplo.jpg" alt="ModeloExemplo" width="458" height="420" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ModeloExemplo.jpg 369w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ModeloExemplo-300x275.jpg 300w" sizes="(max-width: 458px) 100vw, 458px" /></a><figcaption id="caption-attachment-540" class="wp-caption-text">Model</figcaption></figure>
<figure id="attachment_541" aria-describedby="caption-attachment-541" style="width: 474px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/ViewExemplo.jpg"><img decoding="async" class="wp-image-541 " src="https://dtidigital.com.br/wp-content/uploads/2015/11/ViewExemplo.jpg" alt="ViewExemplo" width="474" height="477" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ViewExemplo.jpg 334w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ViewExemplo-298x300.jpg 298w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ViewExemplo-150x150.jpg 150w" sizes="(max-width: 474px) 100vw, 474px" /></a><figcaption id="caption-attachment-541" class="wp-caption-text">View</figcaption></figure>
<figure id="attachment_542" aria-describedby="caption-attachment-542" style="width: 491px" class="wp-caption aligncenter"><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/ControllerExemplo.jpg"><img decoding="async" class="wp-image-542 " src="https://dtidigital.com.br/wp-content/uploads/2015/11/ControllerExemplo.jpg" alt="ControllerExemplo" width="491" height="455" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ControllerExemplo.jpg 529w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/ControllerExemplo-300x278.jpg 300w" sizes="(max-width: 491px) 100vw, 491px" /></a><figcaption id="caption-attachment-542" class="wp-caption-text">Controller</figcaption></figure>
Reparou os marcadores iniciados com ‘@’  na View? Esse é o meio como inserimos trechos de código na nossa View utilizando Razor. No exemplo acima, importamos algumas bibliotecas para nossa tela e definimos seu Model. Agora, vamos inserir um trecho de código na nossa View para mostrar os dados de Nome e Idade do nosso Model:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo1.jpg"><img loading="lazy" decoding="async" class="size-full wp-image-543 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo1.jpg" alt="Exemplo1" width="616" height="400" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/Exemplo1.jpg 616w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/Exemplo1-300x195.jpg 300w" sizes="(max-width: 616px) 100vw, 616px" /></a>
Bem simples, não é? Uma vez que o Model da página foi preenchido no Controller e foi retornado juntamente com a View suas informações também foram transportadas para a página. É muito importante ressaltar que o Model que a View recebe deve ser o mesmo definido no HTML. Em sequência, que tal experimentarmos inserir um pouco de lógica na nossa página? Vamos implementar um pequeno condicional:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo2Pagina-e1448483157912.jpg"><img loading="lazy" decoding="async" class="size-full wp-image-544 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo2Pagina-e1448483157912.jpg" alt="Exemplo2Pagina" width="706" height="701" /></a>
Caso a variável do Model esteja com o valor ‘true’, uma parte específica do código será executada. Mas não acaba por ai, com Razor você pode executar praticamente quase qualquer tipo de lógica que você executaria no backend da sua página na sua View como comparações, expressões aritméticas e até mesmos importar bibliotecas e classes para sua View como Enum e Linq. 
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo3.jpg"><img loading="lazy" decoding="async" class="size-full wp-image-545 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/11/Exemplo3.jpg" alt="Exemplo3" width="706" height="352" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/Exemplo3.jpg 706w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/11/Exemplo3-300x150.jpg 300w" sizes="(max-width: 706px) 100vw, 706px" /></a>
Essa foi uma demonstração extremamente simples de como podemos utilizar Razor em uma aplicação MVC.  A biblioteca do Razor traz consigo vários outros recursos no qual facilitam e organizam bastante o desenvolvimento de uma página, como Helpers para a criação de componentes para o HTML como Textboxes, DropDown e afins, mas não os citaremos no momento.
Apesar de o Razor simplificar bastante o desenvolvimento ele cria uma dependência muito forte do seu backend com seu frontend, o que pode gerar algumas complicações com a reutilização de páginas e modelos e até mesmo possíveis mudanças em qualquer um dos lados.
Bem, essa foi uma leve introdução ao Razor View Engine para aqueles que não conheciam a ferramenta. 
Se você quer saber mais sobre ASP.NET MVC, aqui você confere um especial sobre rotas em <a style="color: #ff6600;" href="http://dtidigital.com.br/blog/rotas-em-asp-net-mvc/">asp.net MVC</a>, <a style="color: #ff6600;" href="http://dtidigital.com.br/blog/rotas-em-asp-net-mvc-parte-2-roteamento-personalizado/">mapeamento personalizado</a> e <a style="color: #ff6600;" href="http://dtidigital.com.br/blog/rotas-em-asp-net-mvc-parte-3-mapeamento-distribuido/">mapeamento distribuído</a>.
<h5 class="p1" style="text-align: justify;">Por: Marcelo Barbosa</h5>
<h5 class="p1" style="text-align: justify;">Revisão: Jéssica Saliba</h5>

ASP.NET MVC – UTILIZANDO RAZOR VIEW ENGINE

One-stop shop em tecnologia

Confira outros artigos