No primeiro artigo desta série, “Construindo aplicativos com ASP.NET Razor e WebMatrix”, você foi apresentado ao WebMatrix e seus principais recursos. Ao final dele, sem entrar em mais detalhes em relação ao código, construímos uma aplicação simples que solicitava valores ao usuário através de um formulário e, em seguida, apresentava estes valores na tela.
Neste segundo artigo, vamos conhecer um pouco mais de perto a nova view engine da Microsoft e que já vem acoplada ao WebMatrix – o ASP.NET Razor.
O que é Razor?
Nada mais é do que um novo modelo para construção de páginas de visualização (views) em nossas aplicações web. Este modelo possui como regra básica o fato de que é possível inserir blocos de código (em C# ou VB.NET) na estrutura HTML da view. Ou seja, o programador pode utilizar seu expertise nas linguagens para construir suas páginas.
Algo interessante a ser mencionado é que o Razor não é uma nova linguagem de programação! Isto tem sido um questionamento comum entre os desenvolvedores que estão começando seus estudos. Como mencionado anteriormente, você escreve seus trechos de código em VB.NET ou C#, entrentanto, os escreve segundo as regras do padrão Razor.
A idéia aqui é que os blocos de comando C# ou VB.NET sejam inseridos no contexto do HTML; que resulta em um código limpo, legível e com manutenção mais fácil/simples.
O ASP.NET MVC 3 traz o Razor como view engine padrão o Razor. Meu amigo Vinicius Quaiato (@vquaiato), um dos entusiastas da tecnologia MVC no Brasil, escreveu um ótimo artigo apresentando uma forma simples e direta para escrevermos views utilizando a framework MVC 3. Recomendo a leitura do seu artigo.
Arquivos que utilizam padrão Razor possuem a extensão .CSHTML (no caso da linguagem C#) ou V.VBHTML (para o caso da linguagem VB.NET).
Entrando em Contato com o Razor
A seguir, alguns exemplos de como podemos trabalhar com ASP.NET Razor e a amostra detalhada de cada ação.
A Listagem 01 apresenta nosso primeiro exemplo. E vale lembrar que todos os nossos exemplos utilizam o WebMatrix Beta 2.
[html]
@{ var idade = 27; }
@{ var nome = "Fabrício Lopes Sanchez"; }
@{
var diaSemana = DateTime.Now.DayOfWeek;
string saudacao = "Olá Mundo";
string mensagemFinal = saudacao + ", hoje é " + diaSemana;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@saudacao</title>
</head>
<body>
<h1>
@mensagemFinal
</h1>
<p>
Meu nome: @nome <br />
Minha idade: @idade anos
</p>
</body>
</html>
[/html]
Listagem 01: Exemplos de utilização do ASP.NET Razor
Ao executarmos o código apresentado pela Listagem 01, visualizaremos algo semelhante ao apresentado pela Figura 01.
Figura 01: Exibição dos dados do Exemplo 01
Como você pode notar, o código apresentado pela Listagem 1 é simples, entretanto, fala muito da natureza e utilização do Razor. Os principais aspectos a serem considerados ao analisarmos o código da Listagem 1 são:
-
Utilização do símbolo ‘@’: em seu blog, Scott Guthrie justifica a adoção do caracter “@”. A idéia é que, quanto mais periférico o caracter, mais fácil é escrevê-lo. Assim, o velho “%” que está centralizado no teclado dá lugar ao “@” quando um bloco de código precisa ser delimitado.
- Formas de escrever códigos: quando falamos em Razor, temos basicamente 3 formas para posicionarmos o código de nossa aplicação: blocos simples, blocos compostos ou inline. As linhas 1 e 2 nos mostram blocos simples. Já as linhas de 4 a 8 nos mostram um bloco composto. Finalmente, nas linhas 14, 18, 21 e 22 temos exemplos de como podemos escrever código inline.
-
Variáveis: como é possível notar nas linhas 1, 2, 5, 6 e 7, podemos criar variáveis para armazenar valores temporários para posterior trabalho com estes.
Bom pessoal, por enquanto é isso. No próximo artigo da série, vamos aprender a trabalhar de forma otimizada com formulários utilizando o WebMatrix e o ASP.NET Razor. Não percam!
Não esqueçam de deixar seus comentários, sua participação é importante!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?