Fala filhotes, tudo bem? Bom como nós do 100loop já falamos sobre WebMatrix e o MVC 3, e ambos usam Razor, já passou da hora de também falarmos sobre esse assunto.

Objetivo do Post

Fazer uma introdução ao Razor, mostrando como funciona a sintaxe além de alguns exemplos funcionais para facilitar o entendimento. 

Ferramentas

Utilizarei o WebMatrix Beta 2.

O que é o Razor?

Bom, o Razor como dito antes é uma nova “View Engine” lançada no MVC 3 Preview 1 e no WebMatrix Beta 2. Razor tem um conceito muito simples, e pela sintaxe não ser diferente do que o desenvolvedor esta acostumado ( pode ser C# ou VB) facilita o aprendizado. O Razor funciona com as extensões CSHTML (C#) e VBHTML (VB). 

Razor, mais facilidade e velocidade

O objetivo do Razor é deixar a programação mais dinâmica e com uma sintaxe familiar ao usuário. O Razor nos possibilita adicionar server code (C#, VB) no meio do html com o mínimo de esforço possível. Bom, imagino que todos vocês já devem ter precisado escrever um código C# no meio da pagina ASPX, para fazermos isso era necessário usar <% %> para se criar blocos de código dentro do HTML:

 <h2>    Bem vindo <%= Session["Usuario"] %> ! </h2>

Com o Razor ficou mais simples, basta usar o @ antes de um comando:

image

Uma das coisas que os desenvolvedores da Microsoft estavam preocupados é com a quantidade de caracteres usada para “chamar” o código, como dito antes antigamente para fazer isso usando o <% %> gastava-se de 4 á 5 caracteres enquanto agora você só gasta um. Eles estavam preocupados até com a localização das teclas do teclado, por exemplo, o @ esta bem localizado no teclado, deixando a programação bem mais rápida e dinâmica. É interessante saber que até coisas assim são levadas em conta na hora de desenvolver uma linguagem.

Sintaxe e Exemplos

O Razor consegue distinguir o que é C#/VB e HTML no comando:

image

Graças a isso, podemos usar só um @ no foreach e fechar as chaves lá em baixo sem nem ter que usar o @. Mesma coisa com o if:

image

Veja que eu só usei um @ e ele já sabe o que considerar. Para escrever um bloco de código use o @{ } :

image

Você pode usar também o @( ) para criar um bloco de códigos simples:

image

Como eu já disse o Razor “sabe” o que é HTML e o que é código, então você não deve ter problemas usando o @ ( email, etc… ) em outros lugares da sua pagina. Mas caso precisar basta você usar @@ para evitar que o Razor interprete o comando:

<p>Para pegar a data atual use o @@DateTime.Now</p>

E na tela fica assim:

image

Informações adicionais

Bom, infelizmente nem tudo são flores, como o Razor ainda esta na versão Beta nós podemos enfrentar alguns problemas, o principal é que o Visual Studio ainda não tem suporte para intelisense ou code highlight usando o Razor, e o WebMatrix não tem intelisense apesar de ter o highlighter. Pelo menos temos alguns plugins do VS para nos ajudar com isso, como o Razor Syntax Highlighter que nos da suporte a pelo menos o code highlight e promete que logo dará suporte também ao intelisente.

Então galera, acho o Razor no mínimo sensacional… E ainda vai melhorar muito! 
Espero que vocês tenham gostado! Abraços,

Refêrencias:

Um post bastante completo sobre o assunto: (em Inglês) http://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx