Áreas en ASP.NET MVC – Una forma de organizar nuestras aplicaciones

Cuando trabajamos en nuestras aplicaciones ASP.NET MVC muchas veces llega el momento en que su tamaño comienza a ser demasiado grande, haciéndose muy difícil y tediosa la gestión de todos los controladores, modelos y vistas necesarios. Como generalmente sucede, tenemos una solución nativa para esto: las áreas.

La definición más simple de área es que la misma es una parte de nuestra aplicación. Cada área tiene su conjunto de controladores, modelos y vistas, de forma que hay una separación tanto a nivel lógica como física de los mismos. Como comentamos antes, esto es muy útil en aquellos proyectos muy grandes, en donde la cantidad de los elementos mencionados anteriormente hace su gestión prácticamente imposible.

También hay otros casos donde podemos usar áreas. Básicamente, cuando tenemos dos o más partes que debemos separar por algún propósito definido. Como mencionamos antes, uno puede ser la cantidad de elementos. Otro podría ser por compatibilidad con SEO que necesite tener una parte de nuestra aplicación y no otra. Y así con más casos donde haya una diferenciación. La precaución que debemos tener (como en casi todo) es no abusar de esta herramienta y terminar con muchas áreas, la cual cada una tiene un solo controlador (excepto que haya un motivo que realmente lo justifique).

Vayamos a un ejemplo para ver como realizarlo. Supongamos que vamos a realizar un sistema de una universidad, el cual tendrá soporte a la parte contable, alumnado y autogestión de los alumnos. Ya podemos plantear inicialmente que nuestra aplicación tenga tres áreas totalmente diferenciadas, una para cada uno de los puntos mencionados anteriormente (aunque en la práctica tal vez requiera una análisis más detallado para entender la necesidad).

Lo primero que debemos hacer es sobre nuestro proyecto ASP.NET MVC, seleccionar la opción “Agregar” -> “Área…“. Allí simplemente nos aparecerá un diálogo de carga para que ingresemos el nombre del área a crear:

Agregar área
Agregar área a nuestra aplicación

Una vez confirmada la operación, veremos en el explorador de soluciones que se nos ha creado una nueva estructura. La misma contendrá todas las áreas que tengamos en nuestra aplicación, cada una con sus controladores, modelos y vistas de forma separada. Siguiendo con el ejemplo descrito anteriormente, inicialmente tendremos nuestra nueva área “Elearning” de la siguiente forma:

Area - ResultadoProyecto
Resultado de agregar al proyecto nuestra área “Elearning”

A su vez, podemos apreciar que se nos ha agregado un nuevo archivo: ElearningAreaRegistration. El mismo hereda de AreaRegistration, y su objetivo es registrar la ruta correspondiente a este área.

Area - Registration
Registración del área y su ruta

Como podemos ver, tenemos el nombre del área y la ruta correspondiente a este área. Esta última la podremos modificar según lo necesitemos o agregar nuevas, como cualquier otra de las rutas que definimos en nuestra aplicación ASP.NET MVC.

Como mencionamos anteriormente, cada área nos permitirá establecer una separación lógica de las distintas áreas o conceptos genéricos en los que se separa nuestra aplicación. Dentro de los mismos podremos generar los controladores y vistas tal cual lo haríamos de forma normal sin el concepto de áreas. Si por ejemplo agregamos el controlador Matter (para las materias de nuestro elearning) con la vista Index, el resultado que nos quedará es el siguiente:

Area - AgregadaVista
Resultado del proyecto luego de agregar el controlador y las vistas necesarias

A su vez, como se ve en la imagen, también agregamos la vista _Layout en la carpeta Shared. Esto nos permite que cada área tenga su página de tipo Master independiente de las otras. Esto no impide que usemos la vista _Layout genérica de la aplicación web, sin especificar la de un área en particular.

Probemos la ejecución del trabajo que tenemos desarrollado hasta ahora. Para ello ejecutamos la aplicación y accedemos tanto a la raíz de la aplicación como a la ruta correspondiente a la vista que agregamos (/Elearning/Matter/Index):

Area - Pantallas
Pantallas de las dos áreas de nuestra aplicación

Como se puede apreciar, cada una de las vistas tiene sus particularidades en el template (aunque en este caso son mínimas, podemos ver que existen). Como comentábamos anteriormente, esto nos permite independizar cada una de las áreas con sus necesidades particulares.

Ahora bien, aunque generalmente cada área es un concepto separado dentro de nuestra aplicación, puede ser que en algunos casos necesitemos establecer una comunicación entre una y otra. Esto es muy sencillo, tanto realizando un ActionLink en una vista, como un RedirectToAction desde el controlador.

En el caso de la vista, deberemos realizar un Html.ActionLink en el cual agregamos lo resaltado en rojo:

Area - ActionLink

Similar es el caso para el RedirectToAction desde un controlador:

Area - RedirectToAction

De esta forma, podremos tener comunicación entre las dos áreas que conforman nuestra aplicación.

Luego el uso en si dentro de cada área es el convencional que haríamos en una aplicación ASP.NET MVC sin el uso de las mismas: podremos crear todos los controladores y vistas (de los distintos tipos) que sean necesarios.

Espero que les sea útil, y lo puedan usar para hacer más simple la gestión de sus proyectos!

Gracias por leer!!

Anuncios

6 comentarios en “Áreas en ASP.NET MVC – Una forma de organizar nuestras aplicaciones

  1. Interesante, especialmente para dividir el código a nivel interno. Solamente hay que acordarse del parámetro de @area en los links para no volverse loco con las redirecciones. Aquí podría armarse un helper para facilitar la codificación.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s