Vinicius Quaiato

ASP.NET MVC 3 â Razor View Engine

14/10/2010

Razor é o nome (espero que definitivo) para a nova View Engine disponível para as aplicações ASP.NET MVC. O Razor não está somente no ASP.NET MVC, mas também em aplicações desenvolvidas com WebMatrix como mostrei aqui.

Qual objetivo do Razor?

A idéia principal é a simplicidade. A idéia é diminuir o ruído entre o código HTML e o código C# (ou VB) em nossas views. Os caracteres de controle causam muita poluição, e a necessidade de muita digitação.Hoje para exibir uma data por exemplo em uma view é necessário fazer algo como:

<%= DateTime.Now %>

Com Razor faremos algo como:

@DateTime.Now

Ao invés de 5 caracteres digitamos apenas 1. \o/Outro detalhe interessante mencionado pelo Scott Gu é o fato de que o símbolo de “%” está quase no meio do teclado, e não é muito simples para digitarmos, enquanto o símbolo “@” está bem ao alcance de nossos dedos do lado esquerdo do teclado.

Razor é uma nova linguagem?

Não! Razor não é uma nova linguagem. É apenas uma forma diferente de escrever nossas views. Razor utiliza tanto C# quanto VB, não é necessário aprender uma linguagem nova.

Razor é inteligente!

Razor realmente é muito podereso. Seu parser é muito inteligente, ele conhece C#, conhece VB, e é claro conhece HTML. Desta forma podemos escrever um código como este:

<div>            @foreach(var pessoa in Model){
 @pessoa.Nome (@pessoa.Sexo) - @pessoa.Idade anos
}


    </div>

E podemos ver que o resultado está correto:

Ou seja: não há diferença no resultado final! O Razor se integra muito bem ao código HTML, você não fica com muito ruído no código.

Ok, mas como utilizo o Razor?

Uma das opções é trabalhando com o WebMatrix (mostrei o WebMatrix aqui), a outra é bem mais bacana: trabalhando com ASP.NET MVC 3 Beta (veja como instalar aqui).

Criando um projeto ASP.NET MVC 3 Beta para usar Razor

Vamos criar um novo projeto ASP.NET MVC 3:

Feito isso, na versão Beta do MVC 3 veremos a seguinte tela:

Teoricamente esta janela deveria definir a View Engine padrão para o nosso projeto. No entanto quando formos adicionar uma nova View veremos que por padrão ainda vem “ASPX (C#)” (um bug provavelmente).

Criando um controller

Vamos criar um controller bem simples, como pode ser visto abaixo:

public class HomeController : Controller {
    public ActionResult Index() {
        var viewModel = new SimpleViewModel {
            DataQualquer = DateTime.Now.AddDays(3),
            Nome = "Quaiato ASP.NET MVC Razor",
            ListaInteiros = new[] { 1, 1, 2, 3, 5, 8 }
        };

        return View(viewModel);
    }
}

Apenas criei uma classe com as propriedades acima, para servir como meu “view model” (veja mais sobre ViewModels aqui).Com o ASP.NET MVC 3 temos views com model dynamic, ou seja, o model type da nossa view é dynamic, e podemos passar qualquer objeto para ela, desde que seus membros existam, pois serão avaliados em runtime.

Criando a view com Razor

Abaixo temos a view de exemplo:

<html>
<head>
    <title>Index</title>
</head>
<body>
    <h1>Olá @Model.Nome</h1>
    <div>
        Você foi cadastrado em: @Model.DataQualquer.ToString("dd/MMM/yyyy")
        Sua sequência fibonacci é:

        @foreach(var num in Model.ListaInteiros) {
            <span>@num,</span>
        }
    </div>
</body>
</html>

O código da view é bastante simples. Reparem na linha 12 que podemos formatar nossa data, assim como faríamos em um código C# mesmo. Este é o poder do Razor: simplicidade e flexibilidade, sem dores.E o resultado podemos conferir aqui:

Conclusão

Com isso pudemos ver alguns princípios básicos do Razor. Em breve mostrarei mais funcionalidades, algumas coisas mais avançadas e interessantes.É nítido o ganho de produtividade que temos. Isso sem falar em como é bom nos sentirmos afastados do “asp 3”. \o/Abraços galera, fiquem ligados.Vinicius Quaiato.

ASP.NET MVC 3 â Razor View Engine