Razor 101

Durante algum tempo, desenvolvi exclusivamente back-end. Fiquei “presa” nesse mundinho de APIs e bancos de dados. Confesso que, logo que comecei, eu não era a maior fã não. Hoje, sou apaixonada e simplesmente não gosto mais de front. Nadinha. Necas.

Porém, voltei a ser desenvolvedora fullstack. E tenho que lidar com o front, gostando ou não. No projeto em que estou, utilizamos o Razor como view engine e, honestamente? Estou gostando muito dele como ferramenta!

O ASP.NET Razor é uma view engine que já está incluída no WebMatrix, com ele temos a possibilidade de inserir a lógica da aplicação diretamente na camada de visualização do projeto […]

As páginas ASP.NET criadas pelo WebMatrix utilizando a view engine Razor possuem uma extensão de arquivo especial, os arquivos que utilizam como base a linguagem C# .NET tem a extensão CSHTML e as que utilizam do Visual Basic .NET tem a extensão VBHTML, sendo que essas extensões especiais são reconhecidas pelo servidor web e executa em primeiro lugar os códigos que são executados pelo servidor e em seguida envia a página para o navegador.  – Fonte

Decidi, nesse post, trazer algumas das sintaxes do Razor que achei mais legais durante meu processo de aprendizado. E também algumas facilidades que o Visual Studio te traz ao criar seu primeiro projeto usando essa engine.

Bom, vamos lá! Ao criar seu primeiro projetinho web em .NET, virão carregadas algumas views padrões:

_ViewStart.cshtml, que é a view que define variáveis “globais” dentro do seu projeto. Ela será a primeira a ser executada. Na minha _ViewStart, por hora, só tenho definida a variável Layout, que faz referência justamente para a nossa próxima view…

… que é a _Layout.cshtml! É nela que você esquematiza todo o template da sua aplicação. Ou seja, suas tags html, head e body ficam exatamente aqui!

E, por fim, temos a Index.cshtml, que é onde, no caso, você vai descrever o que fica na página inicial do seu sistema; sendo que você só precisa descrever o que fica dentro do body dela, visto que todo o resto do layout já está na _Layout.

Eu não sei você, mas meus olhinhos brilham com a simplificação do processo todo de criar layouts!

“Ok Olivia, parece muito bonito mesmo. Mas vamo lá: como é que eu coloco um menu e renderizo o body da minha página dentro dessa _Layout aí?”

Vem comigo, gafanhoto.

<html>
<head>
	<title>@ViewBag.Title</title>
	@Styles.Render("~/Content/css")
</head>
<body>
	@Html.Partial("~/Views/Shared/_MenuSuperior.cshtml")
	@RenderBody()
	@RenderSection("Scripts", false)
</body>
</html>

Vamos lá:

  • @Html.Partial – serve para carregar views parciais, ou seja, views que são só uma partezinha do seu sistema. Ali, por exemplo, estou passando o caminho da minha view _MenuSuperior.cshtml. Ou seja: não precisei construir meu menu todo dentro da _Layout. Pude fazê-lo separado e depois carregá-lo ali dentro.
  • @RenderBody() – é aqui que a mágica acontece! Todos os seus conteúdos das páginas serão carregados por esse comando. Desde o mais simples Index.cshtml ao mais complexo Form.cshtml. Tudo aí.

E de lambuja ainda vou te mostrar que:

  • @Styles.Render() – carrega os CSS  a partir do endereço definido no BundleConfig.cs, que é uma maneira linda e prática de “juntar” todos os seus arquivos para que seu usuário não perca bytes baixando seus CSSs e Javascripts um de cada vez.
  • @RenderSection() – carrega os Javascripts na tela a partir de uma seção. Através das seções, conseguimos importar os Javascripts nos finais das páginas que precisamos, e elas ainda ficam salvas para, quando precisarmos, podermos renderizá-las onde bem entendermos (e, dentro da seção, você usa o @Scripts.Render(), que é basicamente a versão do @Styles.Render() para Javascript!)

Uma boa prática: views parciais tem o underline na frente do nome, como _MenuSuperior e _Layout, por exemplo.


Ok, talvez eu seja a única empolgadíssima com esse neném no momento. Mas sério, pra quem abominava front-end, eu até estou conseguindo aceitar, e o Razor tem me ajudado muito com isso.

Ainda quero falar sobre formulários, mensagens com Resources (♥) e otimização com o BundleConfig. Mas deixarei para uma próxima vez.

Feedbacks são muito bem vindos!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.