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:
  2. [sourcecode language=”csharp”]
    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; }

    }
    [/sourcecode]

  3. 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
  4. [sourcecode language=”csharp”]
    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) …
    }
    [/sourcecode]

  5. 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:
  6. [sourcecode language=”csharp”]
    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;
    }
    [/sourcecode]

  7. 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
  8. 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

  9. 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
  10. 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!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.