Posted on janeiro 27, 2020
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:
A _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!