Central ASP.NET MVC

Índice

• 1. O que é
  • História do MVC
  • História do ASP.NET MVC
  • ASP.NET MVC 2 (Março de 2010)
  • ASP.NET MVC 3 (Janeiro de 2011)
  • Comparativo das datas de lançamento
• 2. Por quê usar?
  • Vantagens do ASP.NET MVC
  • Vantagens do ASP.NET Web Forms
• 3. Instalação
• 4. Exemplo – Hello World
• 5. Referências
  • Livros
  • Evangelizadores
  • Exemplos

---

1. O que é

ASP.NET MVC é uma framework de desenvolvimento de aplicações web que permite a construção de aplicações web no padrão MVC (model-view-control) utilizando o poder do ASP.NET e da Framework .NET.

História do MVC

O MVC (Model-View-Control) é um padrão de arquitetura de software que defende a separação da aplicação em camadas, separando a lógica de negócio da lógica de apresentação.
O padrão MVC foi criado em 1979 por Trygve Reenskaug (http://en.wikipedia.org/wiki/Trygve_Reenskaug), cientista da computação e professor da universidade de Oslo, na Noruega. Ele formou a idéia inicial de modularização e separação de processos observando barcos em 1973, mas somente em 1979 quando visitava a Xerox PARC, uma divisão da Xerox na California (http://en.wikipedia.org/wiki/Xerox_Parc), que ele sintetizou suas idéias e criou o padrão MVC (http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html).
Inicialmente o padrão foi aplicado na linguagem Smalltalk, uma das primeiras linguagens de programação existentes, mas desde a sua criação o padrão foi aplicado em dezenas de frameworks de diferentes linguagens como Java (Spring, Struts, JSF), C++, .NET (ASP.NET MVC), Perl, PHP (Zend Framework), Ruby (Rails) etc.

Modelo MVC (Model View Controller)

O Modelo (model) é um conjunto de classes que descrevem os dados que você está trabalhando, assim como as regras de negócio para manipulação desses dados; A Visão (view) é a interface do usuário (UI) O Controlador (controller) gerencia a comunicação entre a interface do usuário e o modelo, recebendo o input do usuário e enviando a camada de negócio para processamento.

História do ASP.NET MVC

• 1993- Surgiu o Mosaic, um dos primeiros browsers gráficos e logo linguagens como Perl e CGI ganharam destaque para a produção de páginas com conteúdos dinâmicos;
  

  Browser Mosaic

• 1996 – A Microsoft lançou o Active Server Pages (ASP) usando VBScript, uma linguagem bastante simplificada;
• 2002- A Microsoft lançou a versão 1.0 da plataforma .NET, que incluía a versão original do ASP.NET utilizando Web Forms;
  

  Microsoft .NET Framework

• 2004 – Lançado o Ruby on Rails, um dos mais populares frameworks MVC criados para web;
• 2006 – Hamilton Verissimo de Oliveira lançou o MonoRail um componente do Castle Project que se tornou o primeiro framework MVC de sucesso para ASP.NET MVC;
• Fevereiro 2007 – Scott Guthrie (ScottGu) da Microsoft durante uma viagem de avião até a costa Leste dos Estados Unidos prototipou o core do ASP.NET MVC, alguns meses depois ele apresentou esse protótipo em uma conferência em Redmond e envolveu outros desenvolvedores para evoluir a versão, então em dezembro de 2007 foi lançada uma versão beta do ASP.NET MVC;
• Março de 2009 – Foi lançado o ASP.NET MVC 1;

ASP.NET MVC 2 (Março de 2010)

Na versão 2 do ASP.NET MVC foram lançadas diversar melhorias e novos helpers para facilitar o desenvolvimento:

• Validação no servidor e no cliente utilizando atributo;
• HTML Helpers tipados;
• Possibilidade de particionar a aplicação em áreas;
• Helper Html.RenderAction suporte a renderização de uma Partial View;
• Novos helpers, utilitários e melhorias na API;

ASP.NET MVC 3 (Janeiro de 2011)

Na versão 3 do ASP.NET MVC além do lançamento da View Engine Razor houve uma grande preocupação em trabalhar melhor a validação no client:

• View Engine Razor;
• Suporte a .NET 4 Data Annotaion;
• Melhor suporte a Javascript:
  • unobtrusive JavaScript
  • jQuery
  • JSON binding

Comparativo das datas de lançamento

---

2. Por quê usar?

Vantagens do ASP.NET MVC

Algumas das vantagens do desenvolvimento utilizando ASP.NET MVC são:
• Mais fácil de Testar – É mais fácil escrever testes automatizados para a aplicação, podendo facilmente utilizar a metodologia TDD (Test-Driven Development);
• Divisão da aplicação em camadas – A aplicação tem uma divisão mais clara entre as camadas de visualização, controle e modelo que facilitam o entendimento e a manutenção das aplicações;
• Sem ViewState – Não utiliza ViewState, então é mais fácil controlar exatamente o código apresentado na página e o comportamento dos controles;
• Desenvolvimento front-end mais simples – É mais fácil integrar no projeto a equipe de front-end que desenvolve o HTML pois a View não possui lógica de apresentação. A view possui apenas o HTML e a marcação dos valores dinâmicos que são enviados pela controller e devem ser apresentados ao usuário;
• Mais fácil de utilizar padrões XHTML e CSS – É mais fácil utilizar padrões XHTML e CSS porque você tem mais controle sobre o HTML que será enviado para o Browser, ao contrário do Web Forms que trabalha com controles que geram o HTML automaticamente;
• Rotas – É mais simples desenvolver aplicações com estruturas complexas de rotas já que as requisições são enviadas para uma classe Controller ao invés de procurar por um arquivo com extensão .aspx no disco, assim é mais simples e flexível construir aplicações que apresentem urls amigáveis. Para o usuário, não interessa se a extensão do arquivo é .aspx ou .html, então se a extensão não é relevante para ele, faz sentido não exibi-la;
• View Engines – Existem diferentes View Engines que podem ser utilizados para marcação do código da View, você pode escolher desenvolver o seu projeto utilizando o View Engine que você mais se adaptar. Por padrão estão disponíveis no Visual Studio os View Engines WebForms, que tem um formato bastante semelhante ao ASP.NET WebForms e o View Engine Razor, porém existem outras opções como NHaml e o Spark. Além disso, você pode escrever sua própria View Engine.
• View para mobile – Como todo o código para controle da apresentação está na Controller, é simples escrever duas Views uma para o site e outra para dispositivos móveis e dependendo do dispositivo que está sendo utilizado para acessar o site apresentar a View mais adequada.

Vantagens do ASP.NET Web Forms

O desenvolvimento utilizando ASP.NET Web Forms não está sendo descontinuado ou mesmo desincentivado pela Microsoft, ambos os modelos, tanto o ASP.NET Web Forms quanto o ASP.NET MVC vão continuar a ser evoluídos pela Microsoft e podem ser escolhidos pelo desenvolvedores para desenvolvimento de novas aplicações web.
O Web Forms foi introduzido em uma época que os desenvolvedores Visual Basic 6.0 estavam muito acostumados a arrastar os controles da barra de ferramentas para a tela, dar um duplo clique nesse controle e implementar o código do evento Click, o código HTML enviado por esses controles para o browser é um código gerado automaticamente, então em alguns casos é difícil aplicar padrões recentes como XHTML e CSS.
Vantagem do desenvolvimento utilizando ASP.NET Web Forms:

• Controles existentes – Existem muitos controles RAD disponíveis para utilização, principalmente em projetos pequenos pode ser interessante utilizar esses controles para desenvolver mais rapidamente as aplicações, no geral a integração desses controles com a página é menos complexa por causa da implementação de eventos do modelo Web Forms;
• Rotas – As Rotas foram implementadas diretamente na base do ASP.NET, então é possível utiliza-las tanto em MVC como no Web Forms;

---

3. Instalação

O que você precisa para desenvolver utilizando o ASP.NET MVC?

1. IIS7
   Para exporar todas as funcionalidade de facilidades do ASP.NET MVC você precisa utilizar o IIS7, ou seja, na estação de desenvolvimento você precisa de Windows 7 ou Windows Vista e precisa ter instalado no servidor o Windows 2008.
   É possivel executar o ASP.NET MVC em computadores com IIS6, porém para fazer isso, você precisará optar entre um dos seguintes modelos:
   • A- Configurar no IIS o mapeamento para uma nova extensão, por exemplo “.mvc”
     Com essa alteração, você precisará utilizar urls com extensão com: http://www.site.com.br/User.mvc/Register ao invés do padrão do ASP.NET MVC, que são urls sem a necessidade de extensão nas páginas, como: http://www.site.com.br/User/Register. É um impacto pequeno, mas de qualquer forma, estão sendo adicionados caracteres desnecessários na url.
   • B- Outra opção é usar “Willdcard mapping” – Essa é uma funcionalidade do IIS6 que permite configurar as urls sem extensões, porém tem alguns porblemas de performance;

   Veja nesse link, mais detalhes de como utilizar o ASP.NET MVC no IIS6: http://haacked.com/archive/2008/11/26/asp.net-mvc-on-iis-6-walkthrough.aspx

   Então, antes de começar o probjeto, é importante verificar se o servidor onde a aplicação será executa é windows 2008 e é possível instalar o ASP.NET MVC e o .NET Framework 4.0

2. Visual Studio 2010Você vai precisar ter instalado no seu ambiente de desenvolvimento (seu computador) o Visual Studio 2010, ou então, o Visual Web Developer Express 2010 SP1, que é a versão mais básica e gratuita do Visual Studio.Para comprar o Visual Studio 2010, utilize o seguinte link: Comprar Visual Studio.Para baixar o Visual Web Developer Express 2010 SP1, utilize o seguinte link: Visual Web Developer Express 2010 SP1
3. Instalar o pacote do ASP.NET MVCVocê pode fazer a instalação utilizando o Microsoft Web Plataform Installer, através do seguinte link: http://www.microsoft.com/web/gallery/install.aspx?appid=MVC3
   

   ASP.NET MVC download do web platadorm installer

   Ou então, utilizar o instalador padrão, disponível nesse link: http://go.microsoft.com/fwlink/?LinkID=208140

   

   Download do instalador do asp.net mvc

4. .NET Framework 4.0
   Emobra exista compatibilidade com a .NET Framework 3.5, para obter acesso a todas as facilidade do ASP.NET MVC é importante desenvolver e executar a aplicação utilizando a .NET Framework 4.0. No ambiente de desenvolvimento, basta ter instalado o Visual Studio 2010. Para o servidor de produção ou homologação, faça a instalação do .NET Framework 4.0 utilizando o Web Plataform Installer .NET Framework 4.0 ou utilizando o .NET Framework 4.0 Stand Alone Installer.
5. SQL ServerÉ interesante instalar também uma versão do SQL Server, pode ser o SQL Server Compact Version que é gratuito e está disponível para download no seguinte link: http://www.microsoft.com/web/gallery/install.aspx?appid=SQLCE;SQLCEVSTools_4_0

---

4. Exemplo – Hello World

Para entender melhor como funciona uma tecnologia, nada melhor que um exemplo. Então, vamos construir o famoso “Hello World”, utilizando ASP.NET MVC.

Atenção, para esse exemplo, você precisará ter instalado o SQL Server Express, faça o download no seguinte link: http://www.microsoft.com/sqlserver/2008/pt/br/express.aspx

Abra o Visual Studio e crie um novo Projeto, menu: File / New / Project

Na janela que será exibida, no menu da esquerda escolha a opção “Web” (para exibição somente dos templates Web e escolha o template), no painel centra escolha o template “ASP.NET MVC 3 Web Application”, defina o nome do projeto como “HelloWorldSite” e confirme. Na próxima janela exibida escolha o template “Empty” (Vazio), o View engine “Razor” e confirme.

Agora, vamos adicionar um projeto para armazenar a camada de Negócio da aplicação. Esse passo não é obrigatório, mas é uma sugestão utilizar esse formato para manter os seus projetos melhor organizados.

Clique com o botão direito do mouse sobre o nome da solução e escolha a opção “Add / New Project”. Escolha o tipo de projeto “Class Library”, nomeie o projeto como “Negocio” e confirme.

Clique com o botão direito do mouse sobre o projeto “Negocio” (recém criado) e escolha a opção “New Folder” e adicione uma pasta com o nome “Entidades”. Depois repita o projeto adicionando uma pasta com o nome “Negocio”.

Agora, vamos ajustar o Namespace e os nomes dos projetos.

Clique com o botão direito do mouse sobre o nome do projeto Negocio, escolha a opção “Propriedades” e altere o Assembly name para “HelloWorld.Negocio” e o Default namespace para: “HelloWorld”. Confirme a alteração.

Clique com o botão direito do mouse sobre o nome do projeto HelloWorldSite, escolha a opção “Propriedades” e altere o Assembly name para “HelloWorld.Website” e o Default namespace para: “HelloWorld.Website”. Confirme a alteração.

Clique com o botão direito do mouse sobre o nome do projeto HelloWorldSite e escolha a opção: “Add / Add ASP.NET Folder / App_Data”, para adicionar a pasta “App_Data” ao projeto do site.
Clique com o botão direito do mouse sobre a pasta App_Data e escolha a opção: “Add / New Item”. Na janela que será exibida, selecione os tipos de template “Data” na lista da esquerda, no painel central escolha a opção “SQL Server Database” e informe o nome “Database.mdf” para criar um arquivo de banco de dados para testes.

Dê um duplo clique com o mouse sobre o arquivo mdf criado, será exibida a janela “Server Explorer”, nessa janela, clique com o botão direito do mouse sobre a pasta “Tables” e escolha a opção “Add New Table”.

Adicione 3 campos na tabela:

• IdUsuario, do tipo int. Marque esse campo como Primary Key e com Identity;
• Nome, varchar(100)
• Email, varchar(100)

Clique com o botão direito do mouse sobre a tabela Usuario e escolha a opção “Show Table Data” para exibir os dados dessa tabela. Insira alguns registros de testes, como mostrado na imagem.

Clique com o botão direito do mouse sobre a pasta “Entidades” no projeto “Negocio” e escolha a opção: “Add / New Item”. Selecione o tipo de template “Data” e escolha o tipo “ADO.NET Entity Data Model” da lista de opções de “Data”. Nomeie o modelo com o nome “Model.edmx” e confirme.

Na janela que será exibida escolha “Generate from database” e confirme. Na próxima janela escolha o arquivo “Database.mdf” do projeto como source da conexão, marque a opção “Sabe entity connection settings in App.config”, informe o valor: “DatabaseEntities” e confirme.

Na mensagem de alerta que será exibida informando que o arquivo de dados não está no projeto atual (O arquivo mdf está no projeto do site e não no projeto de Negocio) e perguntando se deseja copiar para o projeto atual, escolha a opção “Não”, não copiar o arquivo de dados.

Na janela “Choose Your Database Objects” selecione a tabela “Usuario”. Desmarque a opção “Pluralize or singularize generated object names” e Marque a opção “Include foreign key columns in the model”. Informe “DatabaseModel” no campo “Model Namespace” e confirme.

Será exibido o diagrama criado.

Precisamos copiar a conexão que foi criada no arquivo de config do projeto Negocio para o Web.config do site.

Abra o arquivo App.Config do projeto Negocio, localize a tag “connectionStrings” e copie a tag com a conexão que aparece dentro dela. Abra o arquivo Web.config do projeto HelloWorldSite, localize a tag “connectionStrings” e cole a conexão copiada do outro config.

O parâmetro “provider connection string” da connection string deve ser ajustado para indicar que o seu arquivo de dados está na pasta AppData. Para isso, substitua o caminho do arquivo por: |DataDirectory|\Database.mdf

A conexão deverá ficar semelhante a seguinte:

<connectionStrings>
   <add name="DatabaseEntities"
      connectionString="metadata=res://*/Entidades.Model.csdl|res://*/Entidades.Model.ssdl|res://*/Entidades.Model.msl;
      provider=System.Data.SqlClient;
      provider connection string=&quot;Data Source=.\SQL2008EXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;
      Integrated Security=True;
      User Instance=True;
      MultipleActiveResultSets=True&quot;"
      providerName="System.Data.EntityClient" />
</connectionStrings>

No meu caso, a minha instância do SQLExpress está instalada com o nome “SQL2008Express”, pode ser que a sua instância esteja instalada com outro nome como “SQLExpress”.

Clique com o botão direito do mouse sobre a pasta “Negocio” do projeto “Negocio” e escolha a opção “Add / Class”. Adicione uma classe com o nome “Usuario”.

Dentro da classe Usuario, adicione os métodos abaixo para Listar, Inserir, Obter por Id e Obter por e-mail:

        /// <summary>
        /// Lista todos os usuários
        /// </summary>
        public static List Lista()
        {
            using (var ctx = new Entidades.DatabaseEntities())
            {
                var query = (from u in ctx.Usuario
                             select u).OrderBy(a => a.Nome);

                return query.ToList();
            }
        }

        /// <summary>
        /// Insere um novo usuário
        /// </summary>
        public static void Insere(Entidades.Usuario usuario)
        {
            using (var ctx = new Entidades.DatabaseEntities())
            {
                ctx.Usuario.AddObject(usuario);
                ctx.SaveChanges();
            }
        }

        /// <summary>
        /// Obtém usuário por id
        /// </summary>
        public static Entidades.Usuario Obtem(int id)
        {
            using (var ctx = new Entidades.DatabaseEntities())
            {
                var query = (from u in ctx.Usuario
                             where u.IdUsuario == id
                             select u);

                return query.FirstOrDefault();
            }
        }

        /// <summary>
        /// Obtém usuário por e-mail
        /// </summary>
        public static Entidades.Usuario ObtemEmail(string email)
        {
            using (var ctx = new Entidades.DatabaseEntities())
            {
                var query = (from u in ctx.Usuario
                             where u.Email == email
                             select u);

                return query.FirstOrDefault();
            }
        }

        /// <summary>
        /// Atualiza os dados de um usuário
        /// </summary>
        public static void Atualiza(Entidades.Usuario usuario)
        {
            using (var ctx = new Entidades.DatabaseEntities())
            {
                var query = (from u in ctx.Usuario
                             where u.IdUsuario == usuario.IdUsuario
                             select u);

                var usuarioAtual = query.FirstOrDefault();

                ctx.ApplyCurrentValues(usuarioAtual.EntityKey.EntitySetName, usuario);
                ctx.SaveChanges();
            }
        }

Clique com o botão direito do mouse sobre a pasta “Controllers” do projeto “HelloWorldSite” e escolha a opção “Add / Controller”. Defina “HomeController” como o nome da controller.

Abra o arquivo “HomeController” criado, clique com o botão direito do mouse sobre a palavra “View” da linha “return View()” e escolha a opção “Add View”.

Na janela que será exibida, selecione a View engine “Razor”, mantenha desmarcada a opção “Create a dtrongly-types view” e marque a opção “Use a layout or master page” e ao lado do nome do Layout, clique no botão “…” e selecione o arquivo “_Layout.cshtml” dentro da Pasta “Views / Shared”.

No arquivo criado, adicione o seguinte código, abaixo do cabeçalho do arquivo.

<div>Essa é a Home do site</div>
<ul>
	<li><a href="/Usuario">Usuários</a></li>
</ul>

Abra o arquivo “_Layout.cshtml” dentro da pasta “Views\Shared” e adicione a seguinte tag, abaixo da tag <body>:

<h1 style="background: #dddddd; width: 100%;">Hello World</h1>

Execute o projeto clicando no botão “Start Debugging” do Visual Studio, ou pressionando “F5″. O site será exibido no browser.

• Devem herdar da classe Controller;
• Por convenção, são armazenados na pasta “Controllers”;
• Seus métodos públicos são chamados Action e executam ações como exibir a página da Home ou receber os dados enviados por POST em um formulário;

1- O usuário faz a requisição digitando a url do site no browser, no nosso exemplo: http://localhost:4513 (Atenção: Esse número da porta “4513″ pode ser diferente no seu projeto).

2- Essa requisição é enviada pela internet e recebido pelo IIS (o servidor de arquivos onde o site estará hospedado).

3- O IIS manda a requisição recebida para a aplicação

No ultrapassado conhecido ASP.NET Web Forms, criado em 2002, é pesquisado no disco do servidor um arquivo com o nome Index.aspx para tratar a requisição.

Já no ASP.NET MVC, criado em 2009 é pesquisado uma rota para tratar a requisição.

As rotas ficam por padrão no arquivo Global.asax, ao abri-lo encontramos no evento “Application_Start” (evento que é executado quando a aplicação é iniciada), uma chamada para o método “RegisterRoutes” que é o local onde as rotas da aplicação são incluídas:

Os projetos ASP.NET MVC já vem configurados com uma rota padrão, para facilitar o desenvolvimento:

Voltando aos passos da execução: A solicitação da url “http://localhost:4513″ é interceptada para rota padrão.

A estrutura dessa rota padrão é: “{controller}/{action}/{id}”, cada termo antes de cada barra define como o ASP.NET deve tratar a url recebida. E os valores padrões dessa rota são: “controller=Home” e “action=Index”.

Veja para cada url qual Action (método) de qual Controller (classe) será executada, lembrando que o padrão da url é: “{controller}/{action}/{id}” e os valores padrões são: “controller=Home” e “action=Index”.

• URL: “http://localhost:4513/usuario/lista” -> será executada a Controller (classe) “Usuario” (primeira parte da url é a controller), dentro dessa controller será executada a Action (método) Lista.
• URL: “http://localhost:4513/usuario” -> Será executada a Controller (classe) “Usuario”, porém como não informou o nome da Action (método), será executada a Action configurado nos valores padrões dessa rota. Como vimos, para essa rota foi configurado o valor padrão “action=Index”, então será executada a Action “Index” da Controller “Usuario”;
• URL: “http://localhost:4513/” -> Como não especificou nem a controller, nem a action, executará a Controller e a Action definidos nos valores padrões, nesse caso, controller=Home e Action=Index.

5- Interpreta a rota:

No nosso exemplo, abrindo a url: “http://localhost:4513/usuario”, como vimos, será executada a Action “Index” da Controller “Home”, ou seja, será executado o método “Index” da classe “UsuarioController”.

No nosso exemplo, a Controller “Home” tem a seguinte estrutura:

Note a Action “Index”, que é o método que será executado, ele tem apenas uma instrução: “return View()”. Essa instrução solicita que seja exibida a View com o mesmo nome da action, então será exibido o código presente na View “Index” da “Home”, ou seja, o arquivo: /Views/Home/Index.cshtml.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div>Essa é a Home do site</div>
<ul>
	<li><a href="/Usuario">Usuários</a></li>
</ul>

Note no nosso exemplo, que na View “Index.cshtml” da pasta “/Views/Home”, possui uma indicação do Layout que deve ser utilizado para essa página: Layout = “~/Views/Shared/_Layout.cshtml”

Na página exibida no browser, o título “Hello World” é definido no arquivo de Layout e o texto, na View Home.

Como os métodos de negócio estão separados em um projeto de negócio, precisamos referenciar esse projeto de Negocio no projeto do site.

Clique com o botão direito do mouse sobre as referências do projeto do site e escolha a opção “Add Reference”. Na janela que será exibida, clique na aba “Projects”, selecione o projeto “Negocio” e confirme.

Repita o processo (clique com o botão direito do mouse sobre as referências do projeto do site e escolha a opção “Add Reference”). Na janela que será exibida, clique na aba “.NET”, selecione o item “System.Data.Entity” e confirme. Essa referência é necessária para utilizar o método de acesso a dados do Entity.

Clique com o botão direito do mouse sobre a referência adicionada, escolha a opção “Properties”. Na janela de propriedades que será exibida, localize a propriedade “Copy local” e altere o valor para “True”. Isso é necessário para que essa DLL seja copiada para o local onde o site estiver sendo executado.

No projeto do site, adicione uma nova pasta com o nome “ViewModel”.

Clique com o botão direito do mouse sobre a pasta criada e escolha a opção “Add / Class”. Chame a nova classe de “Usuario” e confirme a criação.

Vamos utilizar essa classe para colocar os dados que queremos enviar para a página.

Na classe “Usuario” criada na pasta “ViewModel”, adicione as seguintes propriedades:

public List Lista { get; set; }
public Entidades.Usuario Dados { get; set; }

Agora, clique com o botão direito do mouse sobre a pasta “Controllers” e escolha a opção “Add / Controller”. Defina o nome do controller como “UsuarioController” e confirme.

Abra o arquivo adicionado e adicione o seguinte método:

/// <summary>
/// Exibe a lista de todos usuários (/Usuario)
/// </summary>
public ActionResult Index()
{
    //Recupera os dados na camada de negócio
    var listaUsuarios = Negocio.Usuario.Lista();

    //Preenche a viewModel
    ViewModel.Usuario model = new ViewModel.Usuario();
    model.Lista = listaUsuarios;

    //Reenderiza a view
    return View(model);
}

Essas serão as instruções executadas quando o usuário acessar no Browser a url: “/Usuario”

No final desse método, existe uma instrução “return View(model)”, clique com o botão direito do mouse sobre a pasta “View” e escolha a opção “Add View”. Na janela que será exibida configure as seguintes propriedades:

• View name: “Index” (sem alteração);
• View engine: “Razor” (sem alteração);
• “Create a strongly-typed view”: Marque essa opção e indique o nome da classe ViewModel criada: “Usuario (HelloWorld.Website.ViewModel);
• “Use a layout or master page”: Marque essa opção, clique no botão “…” ao lado e selecione o Layout “_Layout.cshtml” dentro da pasta: “/Views/Shared”;

No arquivo criado, após o cabeçalho do arquivo que indica o Layout selecionado, adicione o seguinte código:

<h2>Lista de usuários</h2>
@foreach (var usuario in Model.Lista){}
<table border="1">
<tbody>
<tr>
<td>Nome</td>
<td>E-mail</td>
</tr>
<tr>
<td>@usuario.Nome</td>
<td>@usuario.Email</td>
<td><a href="/Usuario/Edita/@usuario.IdUsuario">Editar</a></td>
</tr>
</tbody>
</table>

<a href="/Usuario/Insere">Novo</a>

Agora, executando a aplicação, pressionando “F5″ o browser é carregado. Ao navegar até a url “/Usuario” é exibida a página com a listagem de usuários que acabamos de criar:

Note abaixo, que na Controller (UsuarioController) criamos uma instância da classe Usuario (ViewModel Usuario) e preenchemos a propriedade “Lista” com a lista de usuários utilizando o método de negócio “Negocio.Usuario.Lista”. A ViewModel é enviada para a View através da instrução “return View(model)”.

Na View (HTML para apresentação), utilizamos as propriedades da ViewModel (ex: Model.Lista) para apresentar a informação para usuário na página.

Abra a controller Usuario (/Controllers/UsuarioController) e adicione um novo método (Action) com o seguinte código:

/// <summary>
/// Exibe o formulário para inclusão de um novo usuário (/Usuario/Insere/{id})
/// </summary>
[HttpGet]
public ActionResult Insere()
{
    ViewModel.Usuario model = new ViewModel.Usuario();

    model.Dados = new Entidades.Usuario();

    return View(model);
}

Esse é a Action (Método) que será executada quando o usuário navegar com o Browser até a url: /Usuario/Insere

Crie uma View clicando com o botão direito do mouse sobre a palavra “View” e repita o mesmo processo de criação da View Index, ou seja:

• View name: “Insere” (sem alteração);
• View engine: “Razor” (sem alteração);
• “Create a strongly-typed view”: Marque essa opção e indique o nome da classe ViewModel criada: “Usuario (HelloWorld.Website.ViewModel);
• “Use a layout or master page”: Marque essa opção, clique no botão “…” ao lado e selecione o Layout “_Layout.cshtml” dentro da pasta: “/Views/Shared”;

Dentro do arquivo criado, adicione o seguinte código:

<h2>Inclusão de usuário</h2>

@using (Html.BeginForm())
{
    @Html.HiddenFor(a => a.Dados.IdUsuario)

    @Html.LabelFor(a => a.Dados.Nome)
    @Html.TextBoxFor(a => a.Dados.Nome)
    @Html.ValidationMessageFor(a => a.Dados.Nome)

    @Html.LabelFor(a => a.Dados.Email, "E-mail")
    @Html.TextBoxFor(a => a.Dados.Email)
    @Html.ValidationMessageFor(a => a.Dados.Email)

    <input type="submit" value="Enviar" />
}

Ao executar a aplicação pressionando “F5″, ao navegar até a url “/Usuario/Insere” é exibido o formulário para inclusão de usuário:

Abaixo, temos a apresentação do código que foi colocado na View e qual HTML foi enviado para o Browser:

Abra a Controller Usuario (Controllers/UsuarioController) novemente e adicione mais um método, com o seguinte código:

/// <summary>
/// Post do formulário de inclusão (/Usuario/Insere/{id})
/// </summary>
[HttpPost]
public ActionResult Insere(ViewModel.Usuario model)
{
    if (Negocio.Usuario.ObtemEmail(model.Dados.Email) != null)
        ModelState.AddModelError("Dados.Email", "Esse e-mail já está cadastrado");

    if (ModelState.IsValid)
    {
        //Inclui o novo usuário
        Entidades.Usuario usuario = new Entidades.Usuario();
        usuario.Nome = model.Dados.Nome;
        usuario.Email = model.Dados.Email;

        Negocio.Usuario.Insere(usuario);

        return RedirectToAction("Index", "Usuario");
    }

    return Insere();
}

Note que com isso, teremos dois métodos “Insere” nessa Controller, porém um primeiro decorado com o atributo [HttpGet] e outro com o atributo [HttpPost]. O método com o atributo [HttpPost] que acabamos de criar será chamado quando o usuário preencher os dados do formulário e clicar no botão submit é esse método que trata o input do usuário e insere os dados no banco de dados.

Clique com o botão direito do mouse sobre as referências do projeto de Negócio e escolha a opção “add Reference”. Na janela que será exibida, clique na aba “.NET” e adicione a referência a DLL “System.ComponentModel.DataAnnotations”. Essa é uma referência necessária para utilizar validação utilizando DataAnnotations.

Clique com o botão direito do mouse na pasta “Entidades” do projeto “Negocio” e selecione a opção “Add / Class”. Indique “Usuario” como nome dessa nova classe.

Essa será uma classe Partial da Entidade Usuario, ou seja, vamos adicionar novas propriedades na classe Usuario que já existe e que foi definida quando criamos o diagrama do Entity (arquivo Model.edmx).

Nessa classe, adicione um using para o namespace “System.ComponentModel.DataAnnotations”.

Adicine o seguinte código nessa classe:

[MetadataType(typeof(Usuario_Validation))]
public partial class Usuario
{

}

public partial class Usuario_Validation
{
    [Required(ErrorMessage = "Nome é obrigatório")]
    public string Nome { get; set; }

    [Required(ErrorMessage = "E-mail é obrigatório")]
    [RegularExpression(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", ErrorMessage = "E-mail inválido")]
    public string Email { get; set; }
}

Com esse código, estamos adicionando alguns DataAnnotations (regras de validação) para propriedades da entidade Usuario.

Por exemplo, adicionando o atributo “[Required(ErrorMessage = "Nome é obrigatório")]” encima da propriedade Nome, informamos que é obrigatório preencher o campo Nome e se esse campo não for preenchido, deve ser exibida a mensagem de erro: “Nome é obrigatório”.

Adicionamos também validações para dizer que o e-mail é obrigatório e que deve ser checado se o formato do e-mail é válido (isso é feito utilizando uma regular expression).

Essas DataAnnotations podem ser colocados nos seguintes locais:

• Nas propriedades da entidade – Não fizemos isso aqui porque como a Entidade foi gerada pelo Diagrama do Entity, alterações no Diagrama poderiam fazer com que esses atributos fosem removidos;
• Nas propriedades de uma classe Partial da Entidade – Como no nosso exemplo;
• Nas propriedads da ViewModel – Se ao invés de incluir uma propriedade do tipo Usuario na ViewModel, tivessemos incluido as propriedades Nome e Email, poderiamos colocar os DataAnnotations na classe da ViewMode;

Abrimos o arquivo do Layout (Views/Shared/_Layout.cshtml) que está sendo utilizado na nossa View e adicionamos a referência para alguns arquivos Javascript:

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script><script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

Abrimos o arquivo da View e adicionamos o local para exibir as mensagens de validação.

Abaixo do campo Nome adicionamos: “@Html.ValidationMessageFor(a => a.Dados.Nome)”

Abaixo do campo E-mail adicionamos: “@Html.ValidationMessageFor(a => a.Dados.Email)”

Quando executamos a aplicação, abrimos o formulário de inclusão (/Usuario/Insere), se não preenchemos nenhum dado e clicamos no botão “Enviar”, são apresentadas as mensagens de validação: “Nome é obrigatório” e “E-mail é obrigatório”.

Se preenchemos todos os dados corretamente (nome e e-mail) o registro é incluído corretamente.

Podemos também adicionar uma validação para checar se o e-mail informado está duplicado (já está cadastrado no banco de dados), para isso, adicionamos uma validação para ser executada no servidor.

Adicionamos, o código abaixo na action Insere da Controller Usuario. Esse código verifica se o e-mail já existe no banco de dados, chamando o método de negócio “Negocio.Usuario.ObtemEmail” e se existir, gera uma erro para ser apresentado na tela.

if (Negocio.Usuario.ObtemEmail(model.Dados.Email) != null)
                ModelState.AddModelError("Dados.Email", "Esse e-mail já está cadastrado");

Ao executar a aplicação e digitar um e-mail que já esteja cadastrado, a validação é exibida.

Abra a Controller Usuario e adicione mais uma Action (método), com o seguinte código:

/// <summary>
/// Exibe o formulário de edição (/Usuario/Edita/{id})
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet]
public ActionResult Edita(int id)
{
    //Recupera os dados na camada de negócio
    var usuario = Negocio.Usuario.Obtem(id);

    //Preenche a viewModel
    ViewModel.Usuario model = new ViewModel.Usuario();
    model.Dados = usuario;

    //Reenderiza a view
    return View(model);
}

Clique com o botão direito do mouse sobre a palavra “View” e escolha a opção “Add View”.
Faça as mesmas configurações das outras Views:

• View name: “Edita” (sem alteração)
• View engine: Razor (sem alteração)
• Create a strongly-typed view: Marcar essa opção e indicar a ViewModel Usuario
• Use a layout or master page: Marcar essa opção

Na View criada, adicione o seguinte código:

<h2>Edição de usuário</h2>

@using (Html.BeginForm())
{
    @Html.HiddenFor(a => a.Dados.IdUsuario)

    @Html.LabelFor(a => a.Dados.Nome)
    @Html.TextBoxFor(a => a.Dados.Nome)
    @Html.ValidationMessageFor(a => a.Dados.Nome)<br />

    @Html.LabelFor(a => a.Dados.Email, "E-mail")
    @Html.HiddenFor(a => a.Dados.Email)
    <span>@Model.Dados.Email</span><br />

    <input type="submit" value="Enviar" />
}

Vamos adicionar na Usuario Controller também a Action (método) para receber o post do formulário de edição.

/// <summary>
/// Post do formulário de edição (/Usuario/Edita/{id})
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Edita(ViewModel.Usuario model)
{
    if (ModelState.IsValid)
    {
        var usuario = Negocio.Usuario.Obtem(model.Dados.IdUsuario);
        usuario.Nome = model.Dados.Nome;
        Negocio.Usuario.Atualiza(usuario);

        return RedirectToAction("Index", "Usuario");
    }

    return Edita(model.Dados.IdUsuario);
}

A edição de usuário no Browser fica da seguinte forma:

Controller Usuario:

View Edita Usuário:

View Lista Usuários:

View Insere Usuário:

Diagrama de dados:

Partial da Entidade Usuário:

Negócio Usuário:

E temos uma aplicação que Lista, Edita e Insere Usuários:

Todos os arquivos desse exemplo estão disponíveis para download:

5. Referências

Algumas fontes interessantes para complementar o aprendizado, são as seguintes:

Livros

Uma boa opção de livro para complementar o aprendizado é:

Professional ASP.NET MVC 2 (Wrox Programmer to Programmer) Ou então, a versão atualizada desse livro, que é essa aqui: Professional ASP.NET MVC 3 (Wrox Programmer to Programmer)

Evangelizadores

Abaixo a relação de algumas pessoas que divulgam conteúdo sobre ASP.NET MVC:

ScottGu Vice presidente da divisão de desenvolvimento da Microsoft. Comanda o time de desenvolvimento do ASP.NET, do Core .NET, do IIS 7.5, entre outros. Blog em inglês: http://weblogs.asp.net/scottgu/ Blog em português: http://weblogs.asp.net/scottguportuguese/ Twitter: @scottgu

Phil Haack Senior Program Manager at Microsoft on the ASP.NET team, currently working on the new ASP.NET MVC Framework. Twitter: @haacked Blog em inglês: http://haacked.com

Exemplos

NerdDinner Projeto de código aberto para demonstar o uso de ASP.NET MVC. Baixe o código fonte em: http://nerddinner.codeplex.com/ Veja o site funcionando em: http://nerddinner.com/ Baixe o capítulo 1 livro ASP.NET MVC2 Professional com as instrução de como o projeto foi criado: http://www.wrox.com/WileyCDA/Section/id-321793.html