Ao pensarmos em aplicações web com o .NET Framework, não podemos deixar de lembrar do ASP.NET tradicional. Ainda hoje muitas empresas utilizam este tipo de programação, onde realmente podemos fazer aplicações incríveis, porém novas necessidades e novos padrões foram surgindo para que facilite ainda mais nosso trabalho. Desta forma, o MVC vem resolver alguns problemas que tínhamos, deixando o código da aplicação limpo e separando a responsabilidade entre as camadas.
Uma aplicação tradicional ASP.NET é criada com o template padrão de projetos Web da plataforma .NET. Neste tipo de aplicação, temos o código da aplicação separado ou não da página web, no chamado code-behind, onde tratamos eventos e execução de código, como se fosse uma aplicação Windows Forms.
Há algum tempo, a Microsoft tem dado extrema ênfase ao chamado
ASP.NET MVC, que é uma forma de implementação da Microsoft para o padrão de projeto MVC, que significa Model – View – Controller, ou Modelo – Exibição – Controlador. Existem inúmeros outros frameworks para MVC no mercado, em quase todas as linguagens de programação mais utilizadas na web, como PHP, Ruby, dentre outros. Mas antes de aplicarmos este tipo de implementação nos nossos projetos, devemos entender o que é o padrão MVC, e no que ele pode nos ajudar.
O padrão MVC
O MVC é um padrão de projeto. Padrões de projeto podem ser entendidos como uma solução para algum problema, onde seja possível fazer reuso desta em situações semelhantes. O MVC vem como uma proposta bem simples, que se for entendida, fica muito fácil trabalhar com ele. Por ser de fácil implementação, este padrão pode não ser utilizado somente com aplicações Web, mais também com aplicativos Windows Forms ou WPF.
Por padrão, o MVC é dividido em três partes: O Model (modelo de dados), a View (a exibição dos dados) e o Controller (a ponte de ligação entre o Model e a View). Vamos entender cada um deles:
Model
O Model é a nossa representação do dado. Para facilitar o entendimento, vamos assumir que o Model é o que podemos mostrar ao usuário, quais informações vão estar disponíveis, e que valor vai ter cada informação. Um exemplo de Model bem simples pode ser visto na Listagem 1, onde definimos os atributos de um carro.
Listagem 1. Classe Carro.cs
public class Carro
{
public int CarroId { get; set; }
public string Marca { get; set; }
public string Modelo { get; set; }
public int AnoFabricacao { get; set; }
public string Cor { get; set; }
public decimal QuilometragemRodada { get; set; }
}
View
A View vai ser onde exibiremos o dado. Novamente facilitando o entendimento, vamos entender a View como sendo onde exibiremos o dado, se vai ser em tabelas, se vão ser colunas, se vai ser negrito, itálico ou sublinhado. Uma View é um arquivo com HTML e código C# junto, para exibição das informações, que veremos adiante como funciona. Um exemplo de uma View pode ser visto na Listagem 2. Uma View no ASP.NET MVC pode utilizar algumas View Engines para exibição do dado.
Uma View Engine para o ASP.NET MVC, é um framework de exibição das informações. Este framework define quais elementos podem ser exibidos e como devem ser utilizados. A partir da versão 3.0 do ASP.NET MVC, o Visual Studio nos dá duas opções padrão de View Engines, a sintaxe ASPX padrão, como era antigamente antes do code-behind, e o Razor, uma nova forma mais fluída de inserir código nas páginas. Porém, não ficamos limitados a estes dois, podemos utilizar outras View Engines como Spark e NHaml.
Listagem 2. View
@ViewBag.Title
@RenderBody()
Controller
Por fim, temos o Controller, que é o responsável pela comunicação entre o Model e a View. Novamente, podemos entender como se o Controller fosse quem definisse o que podemos fazer com o dado. Um Controller vai ter as ações que podem ser executadas dentro do sistema, limitando as opções do usuário. Um exemplo de um Controller pode ser visto na Listagem 3.
Listagem 3. Controller
public class CarrosController : Controller
{
//
// GET: /Carros/
public ActionResult Index()
{
return View();
}
//
// POST: /Carros/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
//
// POST: /Carros/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
Quando criamos um projeto do tipo web MVC no Visual Studio 2010, temos dois projetos padrão: o MVC Application (um template onde temos algumas funcionalidades básicas implementadas) e o MVC Empty Web Application (solução vazia, somente com a estrutura de pastas, que vamos tratar a seguir). Para trabalharmos com versões mais recentes do MVC, como a versão 3, devemos instalar o Visual Studio 2010 SP1 e o ASP.NET MVC 3 Tools Update, os quais o download está na seção links no final deste artigo. Podemos ver a criação do projeto MVC na tela ilustrada pela Figura 1.
Além deste padrão de tipos de projeto, o ASP.NET MVC mantém algumas convenções de nomes de pasta e estrutura de arquivos que devemos respeitar. Desta forma, o próprio MVC se encarrega de saber o que é o que dentro do projeto, facilitando a vida do programador. Ao criar um projeto com o MVC no Visual Studio 2010, podemos ver que temos algumas pastas pré-definidas no Solution Explorer. A Figura 2 mostra esta estrutura.
Vamos entender o que cada uma destas pastas faz. A pasta Content é a pasta padrão de conteúdo da página, é nela que vão ficar os temas, arquivos CSS e imagens da nossa aplicação. Controllers é a pasta em que os arquivos .cs dos Controllers da aplicação serão colocados. É pelo nome do Controller e sua Action interna que podemos acessar as diferentes páginas da nossa aplicação. O padrão que o MVC assume para todos os arquivos que estão dentro desta pasta é que eles tenham um nome mais “Controller”, como podemos ver que um Controller para o model Carros tem o nome CarrosController.
A pasta Models é onde estarão localizados os nossos modelos, os dados que serão trafegados dentro da aplicação. É nessa pasta em que podemos ter, por exemplo, o contexto do Entity Framework, fazendo o acesso aos dados, ou qualquer outro framework ORM (Object Relational Mapping, em inglês). Um framework ORM vem com o intuito de mapear as tabelas existentes em um banco de dados para classes do nosso modelo, além de implementar todas as formas de persistência dos dados mapeados, tratando inclusão, exclusão e alteração dos mesmos. No MVC, se pensarmos em uma aplicação onde existe consumo de dados em uma base de dados, ou persistência dos mesmos, fazer uso de um ORM pode facilitar muito o trabalho, como veremos mais a frente no exemplo.
A pasta Scripts contém todos os arquivos de Javascript e/ou outras linguagens de script. Por padrão, quando criamos uma aplicação do zero, esta pasta vem preenchida com os scripts para uso do jQuery. Muito comum nas criações de páginas web com interatividade, o Javascript não é uma linguagem nova, mas somente nos últimos anos vem ganhando melhorias e destaque. Uma das principais bibliotecas Javascript hoje é a library jQuery, a qual facilita muito o trabalho do programador, com efeitos, seletores e extensões para os mais diversos fins em aplicações web.
A pasta Views é onde estarão os arquivos .cshtml (para aplicações MVC utilizado a View Engine Razor) e aspx. É nela que a parte visual do site vai estar armazenada, sendo tanto páginas com ou sem código. A pasta Shared interna é onde ficam armazenadas as Views que vão ser compartilhadas entre si. Como convenção, ao criar uma View que é retornada por uma Action dentro do Controller, normalmente deixa-se o nome da View como o nome da Action.
Entendido os princípios anteriores, podemos colocar a mão na massa e experimentar a criação de um controle de Estacionamento em MVC, onde poderemos cadastrar os carros que vão estar estacionados. Vamos fazer um modelo simples, com uma classe, acessando um banco de dados SQL Server para cadastro, e vamos ter quatro páginas, uma página para mostrar os carros cadastrados (nossa página Index.cshtml), uma de cadastro (Create.cshtml), uma de edição (Edit.cshtml) e também uma de exclusão (Delete.cshtml). Nestas páginas vamos utilizar os helpers do Razor e do MVC para nos ajudar com a edição, além do que muitas das ações que vamos fazer serão feitas por Wizards, agilizando ainda mais a criação do exemplo.
O ASP.NET MVC tem o que chamamos de Helpers. Estes helpers na verdade são funções do próprio MVC, que facilitam o nosso trabalho. Por exemplo, temos um Helper que pode gerar os campos de um formulário, como vamos ver nas Views de edição do projeto de exemplo. Outros Helpers podem ter mais funcionalidades, como também podemos criar os nossos conforme houver necessidade. Eles são utilizados diretamente no código HTML das Views.
Criando uma aplicação ASP.NET MVC
Vamos criar um projeto do tipo ASP.NET MVC, e na pasta Model, vamos adicionar (botão direito do mouse > Add > New Item) um ADO.NET Entity Data Model (Figura 3), acessando um banco de dados SQL Server. O script do banco de dados, vocês podem ver na Listagem 4. Vou chamar o Data Model de EstacionamentoModel. Vamos manter as configurações padrão do modelo, a exceção da pluralização de nomes, por isso vamos desmarcar esta opção ao gerar o modelo, como mostrado na Figura 4.
Listagem 4. Script do Banco de Dados
CREATE TABLE [dbo].[Carros] (
[CarroId] int IDENTITY(1, 1) NOT NULL,
[Marca] varchar(20) COLLATE Latin1_General_CI_AS NULL,
[Modelo] varchar(20) COLLATE Latin1_General_CI_AS NULL,
[AnoFabricacao] int NULL,
[Cor] varchar(30) COLLATE Latin1_General_CI_AS NULL,
[QuilometragemRodada] decimal(15, 3) NULL,
CONSTRAINT [PK_Carros] PRIMARY KEY CLUSTERED ([CarroId])
)
ON [PRIMARY]
Tendo o modelo configurado, agora podemos focar nos Controllers da aplicação. Ao criá-los com os Wizards do Visual Studio, podemos criar um Controller específico para as classes que compõem o Model, porém precisamos compilar o nosso projeto antes. Por isso, vamos realizar um Build da solução completa, e vamos adicionar um novo Controller em sua respectiva pasta, clicando com o botão direito do mouse > Add > Controller.
Ao abrir o Wizard, podemos ver que precisamos informar o nome deste Controller (sempre tendo em mente as convenções de nome, no caso teremos um Controller CarrosControler), e podemos escolher dentre três opções: criar um Controller vazio, criar um Controller com a geração automática das Views e das Actions de leitura e escrita de dados (opção mais rápida) e gerar um Controller com as Actions de leitura e escrita vazias. Vamos escolher este último para podermos entender cada parte do Controller enquanto codificamos a sua execução. A Figura 5 vai ilustrar a criação do Controller.
Vamos nos atentar às informações que foram colocadas na geração do arquivo. Primeiro vamos ver as ações que foram criadas, que por padrão são Index, Details, duas Actions Create, duas Actions Edit e duas Actions Delete. A Action Index vamos manter como Index mesmo, porém, podemos notar que foram criadas duas Actions para as outras tarefas do Controller, uma sendo GET e outra POST, sendo a POST decorada com o atributo HttpPost por padrão na criação do Controller. Na Action GET vamos escrever o código que vai nos retornar as informações iniciais que queremos, por exemplo, ao editarmos um Carro, temos que mostrar as informações originais do mesmo. O POST vai enviar as informações para o formulário, usando método HTTP POST. Podemos modificar o comportamento para o método GET do HTTP, mudando de [HttpPost] para [HttpGet].
Nota do DevMan
O HTTP tem dois métodos de envio de formulários, GET e POST. Em um formulário html comum, informamos por qual método HTTP vamos enviar os dados para processamento através do atributo method da tag . No método GET as informações transmitidas pelo formulário vão fazer parte da URL que foi processada, sendo passado para processamento através das QueryStrings, que são aquelas informações passadas depois de um sinal de interrogação (?) na URL da página, por exemplo cliente.aspx?codigoCliente=5. Já no método POST, estas informações ficam invisíveis para o usuário. O POST é o padrão utilizado pelo MVC.
Então vamos codificar a primeira Action da página, a Index. Será por ela que vamos criar os caminhos que vão nos direcionar às outras ações da página. Ao abrirmos o Controller, podemos ver que ainda não temos nada, por isso vamos inserir algumas linhas de código que vão retornar todos os carros que temos no nosso banco de dados. A Listagem 5 vai mostrar o necessário para retornar os dados dos Carros, utilizando Entity Framework. O interessante de utilizarmos um ORM como o Entity Framework para trabalhar com o MVC é que, no nosso modelo temos todas as classes prontas, criadas na geração do Entity Data Model, porém não necessariamente precisamos ficar preso a ele. Outros frameworks ORM também são uma excelente escolha para trabalhar com o MVC, como NHibernate. O interessante é que tenhamos as classes bem desenhadas no nosso Model, pois a partir delas que teremos o resto da aplicação. Na primeira linha, vamos ter a declaração do nosso contexto de acesso a dados, e em seguida estou pedindo para retornar a tabela toda de carros, sem nenhum filtro, para que possamos enviá-la no construtor da View, para que ela seja mostrada em forma de tabela também.
Listagem 5. Action Index
public ActionResult Index()
{
var contexto = new EstacionamentoEntities();
return View(contexto.Carros);
}
Para que possamos facilitar a criação da View, podemos clicar com o botão direito do mouse em cima da palavra View, e selecionar a primeira opção Add View. Feito isso podemos fazer algumas configurações da View, e depois o próprio Visual Studio vai criá-la na pasta correta. A Figura 6 vai ilustrar esta tela. Um detalhe importante é que, como estamos criando uma View que vem de um Model específico, podemos “tipar” a View, para que ela saiba que vai mostrar informações da classe Carros, por exemplo. Neste caso, essa nossa primeira View vamos marcar Create a strongly-typed view, e em Model class vamos selecionar a nossa classe Carros, e em Scaffold Templates (são templates padrão de controles), vamos selecionar que esta View vai fazer um List das informações que lhe são passadas. A View Engine vamos deixar como a Razor.
Ao término da criação da View, podemos já executar o nosso projeto, e vamos poder ver que ele está funcionando, sem precisarmos fazer mais nada. Ao abrir o browser, no endereço vamos complementar com /Carros. Assim que a página carregar, vamos poder ver que ele já vai nos listar os carros, e ainda inserir alguns controles padrão, como Adicionar um Novo registro, editar ou excluir os já existentes, sem termos escrito código para isso.
Para entender como isso foi feito, vamos dar uma olhada na View que foi gerada, em seu código. Na Listagem 6 podemos ver que a estrutura da página é HTML comum, o que vai fazer a diferença são os Helpers que estão inseridos na página. Para trabalharmos com os Helpers e acessar as funções do C# utilizando Razor. Primeiro devemos inserir o sinal de arroba “@”. Dessa forma ele sabe que a partir daquele ponto haverá comandos em linguagem de programação. Na primeira linha, dizemos à View que tipo de Model ela está recebendo, neste caso como retornamos a tabela do banco através do Entity Framework, a View Index vai receber um IEnumerable do tipo Carros. Embaixo podemos ver uma variável dynamic ViewBag. Quando precisamos enviar alguma informação para a view, que não está diretamente relacionada ao Model desta, podemos utilizar a variável ViewBag. Neste caso, estamos passando o Title da página para a View _Layout.cshtml, dentro da pasta Shared. Esta View, se fizermos uma relação com os Web Forms, podemos considerar como uma Master Page. Se abrirmos o seu código, podemos ver o Helper RenderBody(), fazendo o mesmo papel que o ContentPlaceHolder faz nas Master Pages. Seguindo, vamos ter um Helper chamado Html.ActionLink(). Este Helper pode criar links para as ações dentro de Controllers. Neste caso, estamos criando um link para a Action Create dentro do Controller Carros. Se quiséssemos redirecionar para outra Action dentro de outro Controller, devemos passar como parâmetro também para este Helper o nome do Controller. Para deixarmos menos mecânico, vamos modificar o Create New para Adicionar Carro. Em seguida temos a criação da tabela que vai mostrar os dados, lembrando que a maioria das telas vai utilizar HTML puro para criação dos controles de exibição, contudo existem também componentes próprios para MVC prontos, que podem facilitar o trabalho.
Continuando, temos um foreach percorrendo os items do Model, e temos mais um Helper, o Html.DisplayFor(). Com este Helper, vamos fazer a exibição dos dados do Model, neste caso passando uma expressão lambda indicando que campo do item do modelo deve ser exibido. Para finalizar, ainda temos uma nova sobrecarga do Helper Html.ActionLink, onde vamos passar através de um tipo anônimo a informação que precisamos passar como parâmetro da Action, por exemplo a Action Edit precisa do id do carro que queremos editar. Vamos trocar também de Edit, Details e Delete para Editar, Detalhes e Excluir.
Listagem 6. Index.cshtml
@model IEnumerable
@{
ViewBag.Title = "Index";
}
Index
@Html.ActionLink("Adicionar Carro", "Create")
Marca
Modelo
AnoFabricacao
Cor
QuilometragemRodada
|
...
10/08/2011 19:37:00
2011
2011