Artigos .NET ASP.NET MVC 2 Tutorial - Model-View-Controller

Padrões arquitetônicos, tal como View-Controller-Model - MVC estão ganhando mais popularidade nos dias de hoje. A razão disso é simples: o MVC visa separar a lógica de negócio da lógica de apresentação, permitindo o desenvolvimento, teste e manutenção isolada de ambos.

A arquitetura MVC foi descrita em meados de 1979 e foi originalmente desenvolvida para mapear as tarefas tradicionais de entrada, processamento e saída para o modelo de interação com o usuário. A Figura 1 mostra de forma objetiva a abstração do MVC.

Arquitetura MVC
Figura 1. Arquitetura MVC

Componentes do MVC

Na arquitetura MVC o Modelo (Model) é usado para definir e gerenciar o domínio da informação e notificar observadores sobre mudanças nos dados, como, por exemplo, o estado de uma caixa de texto ou a indicação de ativação de um checkbox.

A renderização ou visualização (View) acessa os dados do Model e especifica como os dados do Model são apresentados ao usuário, como por exemplo, um texto dentro de um TextBox.

O Controle (Controller) é o componente para mapear as ações do usuário na View, as quais ocorrem através de eventos e fazem com que o Model seja modificado. Para citar um exemplo, quando um CheckBox habilitado recebe um evento de click, o Controller mapeia essa ação do usuário e modifica o Model, indicando que este agora está desabilitado. O Model, por sua vez, notifica a View, indicando mudança em seu estado. A View recebe a notificação e renderiza o CheckBox desabilitado na tela.

ASP.NET MVC

O melhor modo de aprender um novo Framework é construindo alguma aplicação com ele. Neste primeiro tutorial vamos conhecer a estrutura do ASP. NET MVC 2 usando o Visual Studio 2010. Porém nada impede de você usar outra ferramenta, como por exemplo, o Visual Studio 2008.

Iniciando o projeto

Abra o Visual Studio e a partir do menu File selecione NEW PROJECT. Na janela New Project , em Recent Templates , selecione web;
Em templates selecione ASP. NET MVC 2 Web Application e informe o nome “AppMVC” e selecione a opção do Framework 3.5, conforme mostra a Figura 2.

ASP. NET MVC 2 Web Application
Figura 2. ASP. NET MVC 2 Web Application
Nota: A opção do Framework 3.5 foi escolhida devido alguns hosting não possuírem o Framework 4.0.

Na Figura 2 é possível observar que existe outro template chamado de ASP.NET MVC 2 Empty Web Application . Este template possibilita a criação de um projeto em MVC em branco.

Ao clicar no botão OK será apresentada a janela Create Unit Test Project onde você poderá escolher se deseja criar um projeto para realizar testes ou não. No exemplo vamos deixar marcada a opção padrão para criar um projeto de teste para nossa aplicação web. A Figura 3 traz a tela Create Unit Test Project.

Create Unit Test Project
Figura 3. Create Unit Test Project

Estrutura do Projeto

Na Solution Explorer tem-se dois projeto, o projeto Web e o projeto de testes, conforme pode ser visualizado na Figura 4.

Solution Explorer – Projeto Web e Teste
Figura 4. Solution Explorer – Projeto Web e Teste

A estrutura do projeto Web possui por padrão seis pastas, conforme mostrado na Figura 4. Abaixo segue uma pequena descrição das responsabilidades de cada uma:

  • Controller – Nesta pasta serão colocadas as classes de controle;
  • Models – Nesta pasta serão colocadas as classes para persistência de dados;
  • Views - Nesta pasta serão colocadas as nossas views.
  • Content é usada para conter arquivos de estilo CSS ou Imagens. Esta pasta já possui um arquivo de estilo.
  • Script é para conter os arquivos de JavaScript. Esta pasta já possui alguns scripts, como algumas bibliotecas de JQUERY.
  • App_Data é usado para conter arquivos de dados para ler ou escrever.

O ASP.NET MVC não exige essa estrutura. Na verdade, desenvolvedores que trabalham em aplicativos mais complexos normalmente “dividem” os projetos para torná-lo mais controlável, mas mantendo o conceito.

Quando expandimos o diretório Controller, veremos que o Visual Studio adicionou automaticamente duas classes do controlador, e no diretório View foi adicionado três subdiretórios: Account, Home e Shared.

Reparem que os subdiretórios possuem o mesmo nome das classes dos controladores, subtraído pela palavra Controller.cs. No entanto, o subdiretório Shared é exceção, dentro dele apenas existe uma Master Page. Toda esta forma possui uma razão. Para melhor entendimento execute a aplicação – F5, e clique sobre o botão About e Log On, a Figura 5 mostra como é apresentada a url no navegador ao clicar no botão About.

URL
Figura 5. URL

O Framework ASP.NET MVC efetua o mapeamento da URL(“/Home/About”) para o servidor web de uma maneira diferente ao ASP.NET convencional. Ao invés de mapear a URL para um arquivo no disco o framework mapeia a URL diretamente para os controllers. Desta forma uma classe Controller chamará uma componente View separado, que irá tratar de gerar a saída HTML da requisição. A convenção padrão usada é mapear o caminho URL principal de uma requisição HTTP (Ex: /Home) para uma classe cujo nome segue o modelo: UrlPathController, como já mencionado. Agora, você deve estar se perguntando, mas, e o About?

O About é um método Action dentro da classe HomeController. A classe HomeController herda a classe Controller. Esta invoca automaticamente o método Action apropriado, que neste caso é o Método Action About, baseado nas regras de roteamento da URL para nossa aplicação.

Estas regras de roteamento são definidas no arquivo Global.asax, conforme mostra a Listagem 1.


public class MvcApplication: System.Web.HttpApplication
{
	public static void RegisterRoutes(RouteCollection routes)
	{
		routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

		routes.MapRoute(
		"Defaut", //route name
		"{controller}/{action}/{id}", // URL with parameters
		new { controller = "Home", action = "Index", id - UrlParameter.Optional }
		);
	}
}
Listagem 1. Regras de roteamento no arquivo Global.asax
Nota: Você pode estar verificando quais são as classes que a classe Controller herda.

Para melhor compreensão vamos adicionar dois controllers na aplicação com o nome de “ArtigoController” e “CategoriaController”. Clique com o botão direito do mouse sobre a pasta Controllers e selecione a opção Add Controller conforme traz as Figuras 6 e 7.

Inserindo Controller
Figura 6. Inserindo Controller
Fornecendo o nome para o Controller
Figura 7. Fornecendo o nome para o Controller
Nota: Note que a opção no checkbox está selecionada.

Abra o arquivo ArtigosController, nele foi criado alguns métodos Action, alguns configurados com o atributo [HttpPost]. Muitas vezes não precisamos deixar selecionada a opção no checkbox, foi só para demonstração.

Banco de dados e Modelo

Para continuar com a explicação vamos criar um simples banco de dados, no SQL Server 2008. Conforme mostra a Figura 8.

Banco de dados
Figura 8. Banco de dados

O ASP. NET MVC suporta o uso de algumas tecnologias de acesso a dados, e os desenvolvedores podem escolher a partir de uma variedade de opções de dados para implementar os seus modelos, incluindo: LINQ to Entities, LINQ to SQL, NHibernate, LLBLGen Pro, SubSonic, WilsonORM e entre outros.

Com o banco de dados criado vamos criar o modelo usando o Linq-to-Sql. Para isso, clique com o botão direito do mouse na pasta Models, adicione um novo item, como mostrado na Figura 9.

Adicionando um novo item
> Figura 9. Adicionando um novo item

Escolha entre os Templates, o LINQ to SQL Classes, e forneça o nome de “Crud”, como traz a Figura 10.

Inserindo LINQ to SQL
Figura 10. Inserindo LINQ to SQL

O Visual Studio irá adicionar o Crud.dbml dentro do diretório \Model, e então abra o LINQ to SQL object relational designer, como apresenta a Figura 11.

LINQ to SQL object relational designer
Figura 11. LINQ to SQL object relational designer

Criando Classes Modelo de Dados com LINQ to SQL

LINQ to SQL nos permite criar rapidamente classes de modelo de dados baseado no esquema do banco de dados existente. Para fazer isto, vamos abrir o banco de dados MVC que criamos, no Server Explorer, selecione as duas tabelas que queremos para o modelo, como mostrado na Figura 12.

Modificando propriedade Name do DataContext do LINQ-to-SQL
Figura 12. Modificando propriedade Name do DataContext do LINQ-to-SQL