Un proyecto de software normalmente es enfocado en algún proceso de negocio de la empresa, por ejemplo: Ventas, Contabilidad, Recursos Humanos, etc. Sin embrago, hay ocasiones en las cuales un proyecto es extenso a nivel de procesos empresariales. Es decir dicho proyecto incluye varios procesos corporativos. Para proyectos grandes, es recomendable organizar los módulos de los procesos para lo cual se emplea Áreas en ASP.Net Core.

De forma simple, las Áreas en ASP.Net Core son subcarpetas donde se puede estructurar de forma similar al proyecto principal con los elementos de controladores, vistas, modelos, layout, etc. Cada subcarpeta representa un módulo o proceso de negocio. Tener su propia estructura de componentes brinda un mayor orden y distribución en el proyecto.

También se emplea cuando a pesar de que el proyecto no es muy extenso se decide separar en diferentes secciones, un caso podría ser un sitio web de comercio electrónico. Donde las secciones serian: el portal mismo de compra, una intranet para la empresa donde revisen las ventas realizadas y una extranet donde el cliente pueda revisar sus compras y perfil de usuario.

Anteriormente las áreas se agregaban como un nuevo elemento (Clase, Interface, etc.), pero en la actualidad bajo ASP.Net Core las áreas se agregan de forma manual como carpetas; de igual forma los controladores, vistas, modelos, etc. En este artículo se te mostrara un ejemplo de cómo implementar Áreas en ASP.Net Core.

Requisitos

      • Visual Studio 2019
      • .Net Core SDK
      • Bootstrap 4.0

Áreas en ASP.Net Core Paso 1: Creación de la Solución ASP.Net Core (Modelo-Vista-Controlador)

 

Abre el Visual Studio 2019. Luego, selecciona la opción Crear un proyecto.

 

Después en la parte superior, selecciona la opción C#, Todas las plataformas y Web. Luego, selecciona la opción Aplicación web ASP.NET Core (Modelo-Vista-Controlador). Por último presiona el botón Siguiente.

asp.net core areas

 

Ingresa el nombre del proyecto y la solución. Además, selecciona la ubicación del proyecto. Finaliza haciendo click al botón Siguiente.

 

Después, selecciona la Plataforma de destino .Net Core 3.1. Luego, selecciona el Tipo de autenticación Ninguno. También, desactiva el check Configurar para HTTPS. Por último, haz click al botón Crear.

asp.net core areas

Áreas en ASP.Net Core Paso 2: Creación de las Áreas en el proyecto

 

Las Areas en ASP.Net de un proyecto se manejan mediante la agregación manual de carpetas.

 

Haz click derecho sobre el proyecto Layer.Aplication. Luego, selecciona la opción Agregar. Después selecciona la opción Nueva carpeta.

 

Renombra la carpeta agregada por el nombre Áreas.

asp.net core areas

asp.net core areas

 

Dentro de la carpeta Áreas; debes agregar las subcarpetas y cada una representara un módulo del proyecto:

      • Ventas
      • Contabilidad
      • Logística

asp.net core areas

 

Luego, agrega dentro de los módulos (Áreas) Ventas, Contabilidad y Logística; las carpetas Controllers y Views. Es decir duplica la estructura básica del esquema principal del proyecto.

asp.net core areas

 

Luego, en la carpeta Controller de los módulos (Áreas): Ventas, Contabilidad y Logística; agrega sus respectivos controladores.

 

Haz click derecho en la carpeta Controller. Luego, selecciona la opción Agregar. Despues, selecciona la opción Controlador (Controller). A continuación, selecciona la opción Controlador de MVC: en blanco.

asp.net core areas

asp.net core areas

 

Agrega el nombre del controlador (HomeController)

asp.net core areas

 

Termina de agregar los controladores en sus módulos (Áreas)

      • Ventas (HomeController)
      • Contabilidad (HomeController)
      • Logistica (HomeController)

 

Agrega las vistas de sus controladores.

 

Haga click derecho a la acción Index del controlador. Después, selecciona la opción Agregar Vista. Luego, selecciona la opción Vista Razor: vacía. Último, haz click al botón Agregar.

 

Coloca el nombre de la vista Index.cshtml. Presiona el botón Agregar.

 

 

Cuando termines de agregar las vistas de los controladores de sus módulos (Áreas), se mostrara así.

 

Después agrega la carpeta Shared para cada módulo (Área)

 

Ahora haz click derecho en la carpeta Views del módulo (Área). Luego, selecciona la opción Agregar. Después, selecciona la opción Nueva Carpeta. Adicional renombra la carpeta agregada con el nombre Shared. Repite el proceso en cada módulo (Área).

 

Ahora, agrega una vista en las carpetas Shared con el nombre _Layout.cshtml.

 

Agrega en la carpeta Views de cada módulo (Área) una vista con el nombre _ViewStart.cshtml

 

Luego en las vistas _ViewStart.cshtml, agrega la relación del layout con las vistas con el siguiente código.

  1. @{
  2. Layout = "_Layout";
  3. }

 

Ahora, en los layout _Layout.cshtml; coloca el html base para cada módulo (Área). Para este ejemplo emplea la siguiente estructura de html.

@{
    ViewData["Title"] = "_Layout";
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modulo Ventas</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
 
</head>
<body>
    <div class="container-lg">
 
        @RenderBody()
    </div>
</body>
</html>

Áreas en ASP.Net Core Paso 3: Navegación entre Áreas

 

Para navegar entre las áreas debes emplear el tag Área con el nombre del área en los respectivos controladores.

      • En el controlador HomeController (Área Ventas)
  1. namespace Layer.Aplication.Areas.Ventas.Controllers
  2. {
  3. [Area("Ventas")]
  4. public class HomeController : Controller
  5. {
  6. [HttpGet, Route("~/Ventas/")]
  7. public IActionResult Index()
  8. {
  9. return View();
  10. }
  11. }
  12. }

 

      • Ahora, en el controlador HomeController (Área Contabilidad)
  1. namespace Layer.Aplication.Areas.Contabilidad.Controllers
  2. {
  3. [Area("Contabilidad")]
  4. public class HomeController : Controller
  5. {
  6.  
  7. [HttpGet, Route("~/Contabilidad/")]
  8. public IActionResult Index()
  9. {
  10. return View();
  11. }
  12. }
  13. }

 

      • Por último, en el controlador HomeController (Área Logística)
  1. namespace Layer.Aplication.Areas.Logistica.Controllers
  2. {
  3. [Area("Logistica")]
  4. public class HomeController : Controller
  5. {
  6. [HttpGet, Route("~/Logistica/")]
  7. public IActionResult Index()
  8. {
  9. return View();
  10. }
  11. }
  12. }

 

Para navegar entre los controladores de las áreas debes emplear los enlaces en cada vista Index.cshtml

      • Vista cshtml (Portal Principal)

 

Formato de Enlace en Razor:

@Html.ActionLink([Texto del Enlace], [Nombre de la Accion], new { area = [Area], controller = [Nombre del Controlador] }, new { @class = [Nombre de Clases de Estilos] })

  1. @{
  2. ViewData["Title"] = "Home Page";
  3. }
  4.  
  5. <div class="text-center">
  6. <h1 class="display-4">Welcome</h1>
  7. <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
  8. </div>
  9.  
  10.  
  11. <h1>Portal Principal</h1>
  12. <!--Enlace Area Ventas-->
  13. @Html.ActionLink("Ventas", "Index", new { area = "Ventas", controller = "Home" }, new { @class = "btn btn-primary text-light" })
  14.  
  15. <!--Enlace Area Contabilidad-->
  16. @Html.ActionLink("Contabilidad", "Index", new { area = "Contabilidad", controller = "Home" }, new { @class = "btn btn-success text-light" })
  17.  
  18. <!--Enlace Area Logistica-->
  19. @Html.ActionLink("Logistica", "Index", new { area = "Logistica", controller = "Home" }, new { @class = "btn btn-danger text-light" })

 

 

      • En la vista cshtml (Área Ventas)
  1. @{
  2. ViewData["Title"] = "Index";
  3. }
  4. <h1>Modulo Ventas</h1>
  5. <!--Enlace Area Ventas-->
  6. @Html.ActionLink("Ventas", "Index", new { area = "Ventas", controller = "Home" }, new { @class = "btn btn-primary text-light" })
  7.  
  8. <!--Enlace Area Contabilidad-->
  9. @Html.ActionLink("Contabilidad", "Index", new { area = "Contabilidad", controller = "Home" }, new { @class = "btn btn-success text-light" })
  10.  
  11. <!--Enlace Area Logistica-->
  12. @Html.ActionLink("Logistica", "Index", new { area = "Logistica", controller = "Home" }, new { @class = "btn btn-danger text-light" })
  13.  
  14. <!--Enlace Portal Principal-->
  15. @Html.ActionLink("Principal", "Index", "/", null, new { @class = "btn btn-dark text-light" })

 

 

      • Ahora, en la vista cshtml (Área Contabilidad)
  1. @{
  2. ViewData["Title"] = "Index";
  3. }
  4. <h1>Modulo Contabilidad</h1>
  5. <!--Enlace Area Ventas-->
  6. @Html.ActionLink("Ventas", "Index", new { area = "Ventas", controller = "Home" }, new { @class = "btn btn-primary text-light" })
  7.  
  8. <!--Enlace Area Contabilidad-->
  9. @Html.ActionLink("Contabilidad", "Index", new { area = "Contabilidad", controller = "Home" }, new { @class = "btn btn-success text-light" })
  10.  
  11. <!--Enlace Area Logistica-->
  12. @Html.ActionLink("Logistica", "Index", new { area = "Logistica", controller = "Home" }, new { @class = "btn btn-danger text-light" })
  13.  
  14. <!--Enlace Portal Principal-->
  15. @Html.ActionLink("Principal", "Index", "/", null, new { @class = "btn btn-dark text-light" })

 

 

 

      • Por último, en la vista cshtml (Área Logística)
  1. @{
  2. ViewData["Title"] = "Index";
  3. }
  4. <h1>Modulo Logistica</h1>
  5. <!--Enlace Area Ventas-->
  6. @Html.ActionLink("Ventas", "Index", new { area = "Ventas", controller = "Home" }, new { @class = "btn btn-primary text-light" })
  7.  
  8. <!--Enlace Area Contabilidad-->
  9. @Html.ActionLink("Contabilidad", "Index", new { area = "Contabilidad", controller = "Home" }, new { @class = "btn btn-success text-light" })
  10.  
  11. <!--Enlace Area Logistica-->
  12. @Html.ActionLink("Logistica", "Index", new { area = "Logistica", controller = "Home" }, new { @class = "btn btn-danger text-light" })
  13.  
  14. <!--Enlace Portal Principal-->
  15. @Html.ActionLink("Principal", "Index", "/", null, new { @class = "btn btn-dark text-light" })

 

Conclusiones

      • Las Áreas permiten organizar de forma ordenada un proyecto extenso que involucra diferentes módulos de un conjunto de procesos de una empresa.
      • A pesar de no ser un proyecto extenso, se puede usar las Áreas para dividir la aplicación web en diferentes secciones.
      • La creación de las áreas en ASP.Net Core es de forma manual.

 

Si te gusto mi artículo, te agradecería que me sigas en mis redes sociales o sigas visitando este blog. 

 

Sigueme en:

Compartir:

Código Fuente:

Referencias

Articulos que te pueden interesar?
ASP.Net Core y Servicios REST con ADO.Net – .Net Core

Hoy las organizaciones en su mejora de procesos han implementado diferentes sistemas informáticos. Estos son ejecutados en varios sistemas operativas Read more

ASP.Net Core Logging File con Log4Net – .Net Core
ASP.Net Core Logging File con Log4Net

En este articulo se te explicara el uso de la librería Log4Net y ASP.Net Core para la generación de log Read more

Métodos HTTP – POST, GET, PUT, DELETE
métodos HTTP

Los métodos HTTP, son el formato de comunicación entre el cliente y servidor web. Maneja varios varios formatos: POST, GET, Read more

Bucles JavaScript – Introducción JavaScript
bucles javascript

Los bucles, son una estructura de programación que te permiten ejecutar instrucciones de forma repetitiva, dentro de un bloque de Read more