No artigo anterior (ASP.NET MVC 3 – Desenvolver ficou fácil) eu comentei sobre o uso de áreas para melhor organizar a aplicação Web (Não a solução), porém não apliquei na prática o conceito.
Um cenário comum para as áreas é um e-Commerce por exemplo, onde temos uma área para os usuários, que podem ver ou comprar os produtos e outra área administrativa, para que os funcionários cadastrem os produtos.
Não temos um limite de áreas a serem criadas, e cada área pode possuir seus próprios controllers, views, css, scripts e etc. É como se fosse uma nova aplicação, porém, reaproveitando o domínio e outras coisas compartilhadas entre os projetos.
Como era de se esperar, o Visual Studio novamente dá uma “mãozinha” e permite a criação de uma nova área com poucos cliques (E claro, todo código gerado pode ser editado).
Para não tomar muito tempo, utilizarei o projeto anterior, que pode ser encontrado neste link:
Código Fonte
Com a solução carregada, clique com o botão direito do mouse sobre o projeto MvcFakeStore.Web e selecione a opção Add –> Area, como mostrado na Figura 1.
Figura 1 – Adicionando uma nova área.
Uma nova janela se abrirá, para que esta área seja nomeada. No meu exemplo utilizei o nome “Administrativo”.
Neste ponto, uma nova estrutura de pastas foi criada na aplicação, como mostrado na Figura 2.
Figura 2 – Estrutura de pastas criado para a nova área.
É importante notar que temos a mesma estrutura da pasta raiz da aplicação dentro desta área, incluindo as pastas model, Views, Shared e etc, ou seja, é como se fosse outra aplicação.
Em extra será criado um arquivo com o nome <SuaArea>AreaRegistration.cs que se encarregará de registrar a área na aplicação e fazer o mapeamento das URLs também para sua área.
Com a área criada, criarei os dois controllers (ProductController e CategoryController) novamente nesta área, e posteriormente, deixarei somente os metodos Index e Details (Listar e ver detalhes dos produtos/categoria) nos controllers da raiz da aplicação, e os métodos de criação, edição e exclusão, dentro da área administrativa.
Antes de começar, copie o arquivo _Layout.cshtml da pastas /Views/Shared para a pasta Areas/Administrativo/Views/Shared, como mostrado na Figura 3.
Figura 3 – Copia do arquivo _Layout.cshtml
Aproveite para abrir o arquivo e alterar seu cabeçalho, como mostrado na Figura 4, apenas para diferenciar as áreas.
Figura 4 – Alterando o cabeçalho da página inicial.
Feito isso, na nova área criada, repita os passos do artigo “ASP.NET MVC 3 – Desenvolver ficou fácil”, sessão “Criando os Controllers e Views com Scaffolding Templates”, porém utilizando a pasta Controllers da área “Administrativo” que acabamos de criar e também alterando o template padrão, para usar este Layout que acabamos de criar, como na Figura 5.
Figura 5 – Selecionando o template das Views.
Ao fim a estrutura do projeto deve estar similar a apresentada na Figura 6.
Figura 6 – Estrutura do projeto ao fim da criação dos controllers e views.
Assim como fizemos no artigo anterior “ASP.NET MVC 3 – Desenvolver ficou fácil”, redecoraremos as classes, agora de acordo com suas áreas, como mostrado nas imagens abaixo:
ProductController.cs
CategoryController.cs
Voltando ao projeto inicial, removeremos os métodos de criação, exclusão e edição dos controllers, e suas respectivas Views, como mostrado nas imagens abaixo:
CategoryController.cs (Raiz do site)
ProductController.cs (Raiz do site)
Views removidas, restando apenas as necessárias.
Até este ponto temos a aplicação dividida entre site e setor administrativo, para demonstrar a criação de ActionLinks entre areas, criaremos um link no _Layout.cshtml do site ligando-o com a área administrativa, como mostrado na Figura 7.
Figura 7 – ActionLink parametrizado para direcionar para um controller/action de uma área específica.
Note que simplesmente definimos um parâmetro “area” e informamo a qual área o usuário será redirecionado. Por fim como a sobrecarga do método exige um parâmetro para os Html Objects, informamos null para dar um by pass.
Em alguns casos, pode acontecer um conflito entre controllers (Caso do controller Home – Se criar outro controller Home na área Administrativa ocorrerá o erro da Figura 8.)
Figura 8 – Erro de controllers duplicados.
Para corrigir este problemas precisamos informar qual namespace do controller home principal nas definições das rotas, no arquivo Global.asax.
A Figura 9 mostra a solução para este problema.
Figura 9 – Adicionando namespaces para definir o controller a ser mapeado.
As áreas nos permitem uma divisão dentro das aplicações MVC, é como se tivessemos dois sites dentro de apenas um. Além disso contamos com o compartilhamento das informações entre os sites, o domínio e até o layout.
André Baltieri MTAC – Microsoft Technical Audience Contributor MSN: andrebaltieri@hotmail.com | Twitter: @andrebaltieri Blog: http://andrebaltieri.wordpress.com
Inside .NET Users Group Leader http://www.insidedotnet.com.br/
Ótimo artigo. Muito bom para quem está começando e para quem já conhece!
Parabéns Baltieri.
Parabéns pelo empenho, artigo muito bom e sucinto.
Parabéns pelo excelente material desenvolvido. Continue com o ótimo trabalho.
Muito bom o artigo!
Bem explicado e simples