Hola a todos, cuando trabajamos con ASP.NET Web Forms, una característica muy utilizada es crear carpetas para trabajar diferentes temas y lograr una mejor organización del proyecto, en tal caso podemos ver carpetas como Administrador, Rh, Reportes, etc, según las necesidades del proyecto, pero cuando estamos en ASP.NET MVC, dicha organización no es tan simple (claro que difícil no es), ya que debemos tener en cuenta el sistema de routing que maneja MVC.

Para solucionar lo anterior, desde la versión 2 de MVC contamos con algo conocido como Areas, que sencillamente permiten realizar la organización por carpetas de nuestra aplicación, lo interesante es que podemos decir que cada área viene a ser un pequeño proyecto de MVC ya que disponemos de la misma organización altamente conocida (controladores, vistas, modelos, config).

Para crear una nueva área simplemente click derecho sobre el proyecto –> add –> Area… y le damos un nombre, para el ejemplo que voy a mostrar la he llamado Reportes, una vez termina la creación, tenemos en la raíz una carpeta Areas y allí dentro otra carpeta Reportes que tiene el mini proyecto de MVC para el área Reportes:

image

Si nos fijamos bien, también se ha creado un archivo ReportesAreaRegistration.cs, allí es donde se define el ruteo para el área reportes:

public override void RegisterArea(AreaRegistrationContext context) { context.MapRoute( "Reportes_default", "Reportes/{controller}/{action}/{id}", new { action = "Index", id = UrlParameter.Optional } ); }

Y lo mejor de todo, si vamos al Global.asax al evento Application_Start vemos que ya se está cargando dicha configuración:

AreaRegistration.RegisterAllAreas();

Hasta el momento sencillo no? luego, en Controllers (principal) añadimos un nuevo controlador Home, con la acción Index, y le creamos su vista:

El controlador:

public class HomeController : Controller { public ActionResult Index() { return View(); } }

La vista:

@{ ViewBag.Title = "Index"; }

Index

Vista del controlador Home Principal

@Html.ActionLink("Ir a reportes", "Index", new { area = "Reportes"})

Es importante notar, que en el helper ActionLink en el tercer parámetro le estamos diciendo que vaya al área Reportes.

Igualmente, en el área Reportes añadimos un nuevo controlador con su correspondiente acción y vista:

El controlador:

public class HomeController : Controller { public ActionResult Index() { return View(); } }

La vista:

@{ ViewBag.Title = "Index"; }

Index

Vista del controlador Home del Area Reportes

@Html.ActionLink("Ir al home", "Index", new { area = ""})

En este último caso, como deseamos ir al controlador principal, al area no le asignamos un valor en especial.

Ahora, si probamos, comienzan los problemas Confundido, y el primer error que sale es:

image

En ese error la parte más importante es:

The request for ‘Home’ has found the following matching controllers:
Areas.Areas.Reportes.Controllers.HomeController
Areas.Controllers.HomeController

Del cual es posible deducir que el problema se da porque tenemos dos controladores con el mismo nombre, así que vamos al método RegisterRoutes de la clase RouteConfig y en la definición del ruteo añadimos el namespace, quedando:

routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }, namespaces: new[] { "Areas.Controllers" } );

Listos, y va de nuevo, ejecutamos de nuevo y funciona, pero cuando clickeamos en el link para ir al área de nuevo error:

image

En este caso, tenemos que ir al archivo Web.config del área y si observamos esa línea encontramos algo medio raro en la versión: Version=_WebPagesVersion_.0.0 umm que raro, simplemente lo que debemos hacer es cambiarla por: Version=2.0.0.0, este proceso debe realizarse en las líneas

y en
, y tenemos una línea más cambiar, que es dentro de , pero en ese caso la versión debe ser la 4.0.0.0.

Si ejecutamos de nuevo, ahora el error será en la línea del config del área, para lo cual podemos eliminarla o instalar el paquete Microsoft ASP.NET Web Optimization Framework (el ejemplo lo he realizo usando la plantilla en blanco, así que viene peluquiadito)

Y ahora sí, todo nos funciona de maravilla!

La verdad que el uso de áreas permite organizar mucho mejor el proyecto, y más cuando el proyecto es bastante grande.

Espero les sea de utilidad el post, como siempre les dejo el código del ejemplo, saludos!

Descargar el ejemplo!