Usando o Razor com ASP NET MVC 3

Uma das maiores novidades do ASP NET MVC 3 é o Razor, que nada mais é do que uma engine para a criação das nossas views em HTML, me faz lembrar a época que programava em PHP usando Smarty!

Porque usar Razor?

• Compacto, Expressivo, e Fluente: o Razor minimiza o número de caracteres e teclas digitadas necessárias em um arquivo, e permite um fluxo de trabalho de codificação rápido e fluente. Isto permite uma sintaxe muito compacta e expressiva, que é limpa, rápida e divertida para digitar.
• Fácil para Aprender: o Razor é fácil de aprender e te permite ser produtivo rapidamente com um mínimo de conceitos. Você usa todas as suas habilidades existentes de linguagens de programação e HTML.
• Não é uma nova linguagem: Os desenvolvedores utilizassem seus atuais conhecimentos de linguagens de programação C#/VB (ou outras) com o Razor, entregando uma sintaxe de marcação para modelagem que permite um fluxo de trabalho de construção de código HTML.
• Funciona com qualquer Editor de Texto: o Razor não necessita de uma ferramenta específica (Visual Studio) e te permite ser produtivo em qualquer editor de texto velho e simples.
• Tem ótimo suporte à Intellisense: o Razor foi projetado para não necessitar de uma ferramenta específica ou editor de código, mas ainda assim ele terá um excelente suporte para intellisense dentro do Visual Studio.
• Unidade Testável: A nova implementação deste motor de visões suportará a capacidade de testar visões de maneira unitária

Criando aplicação ASP NET MVC 3

Primeiro de tudo temos que baixar o última versão do ASP NET MVC 3, depois instalar (Next…Next…Finish)

Depois de instalado vamos abrir o Visual Studio vamos criar um novo projeto, clique em File -> New  Project veja que aparece um novo tipo de projeto para o ASP NET MVC 3, selecione e adicione um nome e depois clique em OK

A próxima tela será para selecionar se queremos um projeto Empty (vazio) ou Internet Application que é um projeto com o padrão MVC (autenticação, layout, etc…), selecione a opção Internet Application, veja que logo abaixo temos uma nova opção chamada View Engine onde podemos selecionar se vamos usar o Razor ou vamos usar ASPX igual ao ASP NET MVC 2, selecione Razor e depois clique em OK

Estrutura

Podemos ver que a estrutura não mudou muito, temos as pastas Content, Controllers, Models, Scripts e Views

Mas cade nossas páginas ASPX?

Quando estamos trabalhando com o Razor não temos páginas ASPX e sim templates cshtml que são nossos códigos HTML

Tá entendi… mas cade a MasterPage?

Também não temos MasterPage…e no lugar da master page vamos usar o template _Layout.cshtml

Abra o arquivo _Layout.cshtml e podemos observar que é bem parecido com a Master.page que estavamos acostumado a usar

O que muda é que em vez dos ContentPlaceHolder vamos ter o RenderBody onde vamos renderizar o conteúdo HTML / JavaScript da nossa página

Criando um Exemplo

Agora vamos criar um pequeno exemplo para ver como é gerado os formulários, listas com o Razor

1. Dentro da pasta Model, crie um novo model chamado PessoaModel e adicione os atributos conforme abaixo:

public class PessoaModel
{
    [Required]
    [DataType(DataType.Currency)]
    [Display(Name = "Código")]
    public int Id { get; set; }

    [Required]
    [DataType(DataType.Text)]
    [Display(Name = "Nome")]
    public string Nome { get; set; }

    [Required]
    [DataType(DataType.Text)]
    [Display(Name = "Endereço")]
    public string Endereco { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [Display(Name = "Data Nascimento")]
    public string DataNascimento { get; set; }

}

2. Dentro da pasta Controller, crie um novo controller chamado PessoaController e selecione a opção para criar os métodos Index, Create, Edit e Delete

public class PessoaController : Controller
{
    //
    // GET: /Pessoa/
    public ActionResult Index() ...

    //
    // GET: /Pessoa/Details/5
    public ActionResult Details(int id) ...

    //
    // GET: /Pessoa/Create
    public ActionResult Create() ...

    //
    // POST: /Pessoa/Create
    [HttpPost]
    public ActionResult Create(FormCollection collection) ...

    //
    // GET: /Pessoa/Edit/5
    public ActionResult Edit(int id) ...

    //
    // POST: /Pessoa/Edit/5
    [HttpPost]
    public ActionResult Edit(int id, FormCollection collection) ...

    //
    // GET: /Pessoa/Delete/5
    public ActionResult Delete(int id) ...

    //
    // POST: /Pessoa/Delete/5
    [HttpPost]
    public ActionResult Delete(int id, FormCollection collection) ...
}

3. Agora vamos criar um método “fake” para criar uma lista de pessoas, dentro do controller PessoaController crie um método para criar essa lista, veja abaixo:

private List<PessoaModel> LoadData()
{
    List<PessoaModel> lst = new List<PessoaModel>();
    lst.Add(new PessoaModel() { Id = 1, DataNascimento = "30/01/1901", Endereco = "Rua 1", Nome = "Pessoa 1"});
    lst.Add(new PessoaModel() { Id = 2, DataNascimento = "30/02/1902", Endereco = "Rua 2", Nome = "Pessoa 2" });
    lst.Add(new PessoaModel() { Id = 3, DataNascimento = "30/03/1901", Endereco = "Rua 3", Nome = "Pessoa 3" });
    lst.Add(new PessoaModel() { Id = 4, DataNascimento = "30/04/1904", Endereco = "Rua 4", Nome = "Pessoa 4" });
    lst.Add(new PessoaModel() { Id = 5, DataNascimento = "30/05/1905", Endereco = "Rua 5", Nome = "Pessoa 5" });
    return lst;
}

4. Na action Index vamos chamar o método LoadData e depois clique com o botão direto sobre o action Index e selecione a opção Add View
   • Veja que logo na primeira linha definimos a variável @model que é nosso model (List<PessoaModel>)
   • Não usamos mais as tags<%: %>, e sim somente o @
   • Setamos o título da página e o Layout



Nessa janela também temos algumas alterações, foi adicionado uma nova opção para selecionar o tipo da view que queremos usar (Razor ou ASPX), depois temos que selecionar o nosso layout, também podemos deixar essa opção em branco, automaticamente o framework irá setar o layout conforme configurado no arquivo _ViewStart.cshtml



Veja o html da view Index gerado com o razor!



Algumas considerações:
- Veja que logo na primeira linha definimos a variável @model que é nosso model (List<PessoaModel>)
- Não usamos mais as tags “<%: %>”, e sim somente o “@”
- Setamos o título da página e o template



5. Agora vamos criar a view para a action Create, deve ser seguido os mesmos passos descritos acima, a única diferença será o campo Scaffold Template que deverá ser selecionado Create



Veja o html da view Create gerado



Algumas considerações:
- Veja que foi adicionado os arquivos de JavaScript do Jquery
- Não usamos mais as tags “<%: %>”, e sim somente o “@”
- Setamos o título da página e o template

Comparando ASPX com CSHTML

Veja ume pequena comparação de como o MVC2 e o MVC3 gera as views

Podemos perceber que o Razor veio para facilitar e agilizar o desenvolvimento das nossas views

Qualquer dúvida, opinião, reclamação mande seu comentário!

Aquele Abraço!

Leia mais

• Top 10 Posts de 2011
• Criando HTML Helpers para ASP NET MVC 3
• Novidades do ASP NET MVC 3
• Novidades do Visual Studio 11
• Componentes Telerik para ASP NET MVC
• CRUD usando ExtJs e ASP NET MVC 3
• ASP NET MVC 3 com Entity Framework Code First
• Usando ExtJs GridPanel com ASP NET MVC 3
• Criando um formulário com ExtJs e ASP NET MVC 3
• Usando WebImage com ASP NET MVC 3