ASP .NET - Apresentando a ASP .NET MVC 3

Não vou dizer : "finalmente chegou", pois faz pouco tempo que havia sido lançada a versão ASP .NET MVC 2 e, na verdade, não faz nem um ano e já temos uma nova versão para a ASP .NET MVC : a ASP .NET MVC 3.

Aviso aos marinheiros de primeira viagem: "Se você esta chegando agora e não sabe o que quer dizer ASP .NET MVC sugiro que leia os meus artigos nas referências sobre o assunto e consulte também o site principal: http://www.asp.net/mvc (visite também o blog do ScottGu : http://weblogs.asp.net/scottgu/default.aspx.)"

Bem, mas o que há de novo no ASP .NET MVC 3 ?

A primeira coisa a dizer é que para poder ter os novos recursos aqui citados você terá que instalar o pacote da nova versão em: http://www.asp.net/mvc/mvc3 (Recomenda-se atualizar via Microsoft Web Plataform Installer -> Install ASP.NET MVC 3 using the Web Platform Installer (recommended)

Antes de iniciar a falar das principais novidades quero mencionar que segundo os responsáveis pela nova versão ela é totalmente compatível com a versão ASP .NET MVC 2 e que portanto se você esta desenvolvendo um projeto usando a versão 2 poderá migrar para a versão 3 sem grandes traumas. (promessa é dívida...)

Dentre as novidades da nova versão quero destacar as seguintes:

  1. Razor View Engine;
  2. Dynamic View e View Model;
  3. Master Pages com Razor;
  4. ViewStart;

Após você fazer as atualizações citadas poderá usar o ASP .NET MVC 3 tanto no Visual Studio 2010 como a versão Express - Visual Web Developer 2010 Express Edition - e é esta versão que eu vou usar neste artigo, assim qualquer um poderá acompanhar; se você não tem a ferramenta basta fazer o download no site: http://www.microsoft.com/express/Web/

Abra então o seu Visual Web Developer 2010 Express (VWD 2010) e selecione o menu File -> New Project;

Nota: O exemplo usado neste artigo baseia-se no artigo do blog do ScottGu : http://weblogs.asp.net/scottgu/archive/2010/07/27/introducing-asp-net-mvc-3-preview-1.aspx

Você deverá ver a janela New Project apresentando a opção com template ASP .NET MVC 3 Web Application, tanto na linguagem VB .NET com em C#. (Lembre-se que no VWD 2010 podemos escolher uma dessas duas linguagens.)

Eu escolhi o projeto Web na Linguagem VB .NET usando o Visual Web Developer 2010 Express.

Observe que temos além do template ASP .NET MVC 2 o template ASP .NET MVC 3 o que indica que temos os dois a nossa disposição. (Se você não visualizar o template ASP .NET MVC 3 é porque ainda não atualizou o seu Visual Studio.)

Vamos dar o nome Mvc3_Demo ao projeto e clicar no botão OK;

A janela New Projet para o projeto deverá ser apresentada conforme a figura abaixo:

Visual Web Developer 2010 Express Edition

Podemos selecionar dois templates para o projeto:

Existe uma opção para criar um projeto de teste unitário que se usarmos o Visual Web Developer 2010 Express não vai estar ativa, mas se você usar o Visual Studio 2010 poderá selecionar esta opção conforme mostra a figura a seguir:

Visual Studio 2010

Aqui começam as novidades pois temos a indicação para a criação de um projeto de testes unitários já no início da criação da aplicação. ( Lembrando apenas que um dos fatores positivos ao se utilizar o ASP .NET MVC é a facilidade em testarmos as aplicações devido a separação entre os papéis da aplicação.)

Continuando temos a opção em selecionar a View Engine que usaremos em nossa aplicação e por padrão temos instalados a View Engine ASPX e o Razor. (Veremos em outro artigo que podemos usar outras View Engines)

Mas o que vem a ser esse tal de Razor ???

Razor é nome da nova View Engine das aplicações ASP .NET MVC e WebMatrix. (Veja as referências...)

Nota: Existem outros engines que podemos usar como: Spark, NHaml, NDjango

E o Razor foi criado para simplificar a codificação nas aplicações ASP .NET , pois usando a sintaxe do Razor o código fica mais fácil de digitar, mais simples e legível. (Finalmente poderemos abolir o uso  das tags <%= %> no código)

O Razor é bastante 'esperto' e possui um parse que conhece as marcações HTML , a sintaxe da linguagem VB .NET (VBHTML) e C# (CSHTML).

Fique atento que o Razor não é uma nova linguagem; você vai usar os seus conhecimentos d VB .NET ou C# para usar o Razor e não o contrário.

Assim podemos enumeras o seguintes benefícios em usar o Razor:

• A sintaxe Razor é limpa e concisa, o que requer um número mínimo de digitação;
• O Razor é fácil de aprender, em parte porque ele é baseado em linguagens existentes, como C # e Visual Basic;
• O Visual Studio inclui o IntelliSense e colorização de código para a sintaxe Razor;
• As views Razor podem ser testadas de forma unitária sem exigir que você execute o aplicativo ou abra um servidor web;

Além disso o Razor possui ainda os seguintes recursos:

• sintaxe do modelo de @ para especificar o tipo que está sendo passado para a exibição;
• @ * * @ sintaxe de comentário;
• A capacidade de especificar os padrões (como layoutpage) uma vez para um site inteiro;
• O método Html.Raw para exibição de texto sem codificação HTML;
• Apoio ao compartilhamento de código entre múltiplas visualizações (arquivos _viewstart.cshtml ou _viewstart.vbhtml);

E para mostrar que o danado chegou cheio de recursos o Razor também possui os seguintes Helpers:

• Chart - Processa um gráfico, oferecendo os mesmos recursos como o controle de gráfico no ASP.NET 4;
• WebGrid - Processa uma grade de dados, com funcionalidade de paginação e ordenação;
• Crypto - Utiliza algoritmos de hash para criar senhas devidamente criptografadas;
• WebImage - Processa uma imagem;
• WebMail - Envia uma mensagem de e-mail;

Obs: Para saber mais detalhes sobre a sintaxe Razor veja o meu artigo :  ASP .NET - Apresentando a Sintaxe Razor para C# e VB .NET
Após selecionar a view Engine Razor e clicar no botão OK temos o projeto criado conforme a estrutura mostrada na figura abaixo:

Notou a extensão .vbhtml na pasta Views ?

Essa é a extensão do Razor para a linguagem VB .NET se usarmos a linguagem C# a extensão será: .cshtml.

Como esse é nosso primeiro contato com o ASP .NET MVC 3 vamos criar algo simples apenas para que você vislumbre os recursos do Razor em operação.

Vamos criar um projeto web para listar as categorias dos produtos e permitir aos visitantes clicar em uma categoria para ver a respectiva relação de produtos.

Vamos definir um modelo de entidades usando o Entity Framework 4 a partir do banco de dados Northwind.mdf, usando as tabelas Categories e Products.

Para criar o modelo de entidades que mapeia para as tabelas do banco de dados faça o seguinte:

1- Selecione a pasta Model e no menu Project clique em Add New Item;
2- Em Installed Templates selecione Data e escolha ADO .NET Entity Framework e informe o nome Northwind.edmx e clique em Add;
3- Escolha a opção : Generate from database e clique em Next;
4- Selecione a conexão com o banco de dados Northwind.mdf e clique em Next;
5- Selecione as tabelas Categories e Products (como mostra a figura abaixo) e clique em Finish;   

Ao final será criado o modelo de entidades conforme a figura abaixo:

Se você espiar o arquivo web.config irá perceber que a string de conexão foi criada com o nome NorthwindEntities:

<?xml version="1.0" encoding="utf-8"?>

<!--

For more information on how to configure your ASP.NET application, please visit

http://go.microsoft.com/fwlink/?LinkId=152368

-->

<configuration>

<connectionStrings>

<add name="NorthwindEntities"  connectionString="metadata=res://*/Models.Northwind.csdl|res://*/Models.Northwind.ssdl|res://*/Models.Northwind.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=.\SQLEXPRESS;Initial Catalog=Northwind;Integrated Security=True;MultipleActiveResultSets=True&quot;" providerName="System.Data.EntityClient" />

</connectionStrings>
......
......

O próximo passo é definir o controller e para isso clique com o botão direito do mouse na pasta Controller e selecione Add->Controller;

Na janela Add Controller informe o nome StoreController conforme a figura abaixo e clique no botão Add;

Será criado o arquivo StoreController.vb onde teremos que definir dois métodos :

O código completo desta classe esta exibido a seguir:

Imports System.Linq

Imports System.Web

Imports System.Web.Mvc

Namespace Mvc3_Demo
    Public Class StoreController

        Inherits System.Web.Mvc.Controller

        Private northwind As New NorthwindEntities

        ' GET: /Store

        '

        Function Index() As ActionResult

            Dim categories = northwind.Categories.ToList()

            Return View(categories)

        End Function

        ' GET: /Store/Browse/Beverages

        '

        Public Function Browse(ByVal category As String) As ActionResult

            Dim products = From p In northwind.Products Where p.Category.CategoryName = category Select p

            Return View(products.ToList())

        End Function
 

    End Class

End Namespace

O método Index() utiliza uma consulta LINQ para obter a relação de categorias e o método Browse recebe uma categoria como parâmetro e seleciona os produtos para esta categoria.

Temos que criar as Views para estes métodos. Então mãos a obra...

Com o cursor no método Index() clique com o botão direito do mouse e selecione a opção Add View do menu suspenso:

Na janela Add View, temos o nome da View que será criada (Index) e o nome do layout que será usado para a View. (Note que a View Engine usada é Razor(VBHTML);

Repita o processo para criar a View para o método Browse() do Controller.

Na janela Add View veremos as mesmas opções selecionadas conforme a figura abaixo.

Ao final do processo já teremos as Views Index.vbhtml e Browse.vbhtml criadas na pasta Store conforme exibe a janela Solution Explorer;

Para realizar a exibição dos dados vamos usar o Razor na sintaxe VB .NET.

Iniciando com a View Index.vbhtml onde temos o seguinte código:

Observe a sintaxe Razor para o VB .NET onde os blocos de código são colocados entre @Code/End Code.

O caractere @ inicia expressões inline, blocos de instrução única, e blocos com múltiplas instruções.

No código estamos exibindo os nomes das categorias do modelo de entidades usando um laço @for/next;

A seguir temos o código da View Browse.vbhtml exibe os produtos de uma categoria selecionada.

Novamente usamos um laço @for/next para exibir os produtos:

Observe que declaramos a variável categoria no interior do bloco de código @Code/End Code para obter o nome da categoria que veio no Request.

E para exibir o nome da categoria usamos a sintaxe  Razor : @categoria.

Finalmente para podermos exibir a opção no menu que permite ao usuário exibir as categorias vamos procurar na pasta Views a pasta Shared e nela abrir o arquivo _Layout.vbhtml e incluir neste arquivo  linha de código :  <li>@Html.ActionLink("Estoque", "Index", "Store")</li>

Executando o projeto iremos obter:

A página inicial exibindo o conteúdo da View Index da pasta Home:

Quando o visitante clicar no menu Estoque a relação de categorias será exibida pela View Index.vbhtml da pasta Store:

Quando o visitante clicar em uma categoria a relação de produtos relacionados será exibida pela View Browse.vbhtml da pasta Store;

E assim , concluímos com sucesso nossa primeira aplicação ASP .NET MVC 3 usando o Razor para VB .NET em nossas Views.

Aguarde em breve mais artigos sobre ASP .NET MVC 3 pois existem outros recursos interessantes que irei tratar.

Pegue o projeto completo aqui: Mvc3_Demo.zip

Eu sei é apenas ASP .NET MVC  , mas eu gosto...

Referências:

José Carlos Macoratti