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
- Dentro da pasta Model, crie um novo model chamado PessoaModel e adicione os atributos conforme abaixo:
- 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
- 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:
- 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
- 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
[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]
[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]
[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]
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
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!
Muito bom o artigo.
Realmente esse Razor veio para deixar a View cada vez mais simples.
Vou testar assim que possível.
Continue com outros artigos sobre ASP.NET MVC.
concerteza… Razor vai ser muito útil para os projetos ASP NET MVC 3!!
att,
Leandro Prado
Faltou o download deste projeto em….
Bom dia Leandro,
você acha que aplicações em MVC 3 conseguem realizar todas as tarefas necessárias no desenvolvimento de aplicações mais complexas com regras de negócio que vão além de simples operações de CRUD? Estou para começar a desenvolver uma aplicação e até tenho vontade de usar MVC3, mais tenho um certo receio já que não sei se ela atende projetos de mais complexidade.
Obrigado
César,
Usar o MVC 3 vai depender muito da maturidade da sua equipe, tudo o que você faz no WebForm pode ser feito no MVC
Quando migramos do WebForm para o MVC temos uma curva de aprendizado, onde o desenvolvedor tem que aprender realmente trabalhar com Web, CSS, e JavaScript
Na minha opinião podemos usar o MVC3 em qualquer tipo/tamanho de projeto!
att,
Leandro Prado
Olá Leandro. Sem dúvida, o Razor veio para facilitar a vida de todo mundo, é muito chato ter que ficar colocando , não é nada prático. Belo post, essencial pra quem está começando em MVC. Mas eu tenho uma pergunta.
Sem dúvida, o MVC reduz muito o código e consegue ser tão funcional quanto qualquer outra “linguagem” voltada à web. Mas quando devo usar MVC?
Ouvi dizer, que não é em todos os casos que você deva usar. Porque?
Em que momentos devo escolher entre um Asp.NET normal, um PHP e um MVC?
Estou aprendendo e estou gostando muito, porém ainda quero me aprofundar em outas linguagens para a web.
Obrigado, e parabéns pelo blog! ^^
César
Ultimamente todos os projetos WEB estou fazendo usando o framework ASP NET MVC. Para mim WebForm já é coisa do passado!
Agora essa é uma decisão que tem ser tomada junto com a equipe, o quanto sua equipe está ambientada com MVC? Sua equipe tem domínio em JavaScript, JQuery, CSS, HTML 5?? Quais os riscos para o projeto se usar MVC?
Quando comecei a implantar MVC em fabricas de software começamos com uma equipe e com um projeto que não era muito crítico, com isso a equipe começou a conhecer o framework e hoje nenhum deles querem voltar para o WebForm
Existe uma curva de aprendizado que na minha opinião é pequena, invista tempo em cima do MVC e Entity Framework esse é o futuro!
att,
Leandro Prado
Leandro, estou começando a estudar agora o MVC. Usei seu exemplo acima mas fiz já com o MVC 4. Achei muito interessante! Diria até apaixonante…pela produtividade que se tem. Mas fiquei instigado com um pequeno detalhe: as mensagens de validação da View “Create” estão em inglês, como fazer para que essas e outras mensagens fiquem em português? Tentei procurar nos scripts do jquery, mas sem êxito!
Obrigado,
Thiago Tácito Siqueira
Ótimo artigo, Leandro.
Você poderia disponibilizar os fontes do projeto.
Obrigado,
Cesar Almeida
Opa, vou iniciar meus estudos em MVC com o seu artigo!
Tenho uma feature pra criar no meu trabalho e ainda não manjo de asp.net MVC.
Pelo que vi, muito bem explicado e detalhado o tutorial.
Depois posto qual foi o resultado desta primeira experiência!
Mas desde já, muito obrigado pela ajuda meu caro!