¿Le resultó útil esta página?
Sus comentarios sobre este contenido son muy importantes. Háganos saber su opinión.
¿Tiene comentarios adicionales?
Caracteres restantes: 1500
Exportar (0) Imprimir
Expandir todo
Este artículo se tradujo de forma manual. Mueva el puntero sobre las frases del artículo para ver el texto original.
Traducción
Original

Tutorial: Organizar una aplicación mediante áreas

MVC separa la lógica del modelo (datos) de una aplicación de la lógica de presentación y la lógica empresarial. En ASP.NET MVC, esta separación lógica se implementa también físicamente en la estructura del proyecto, donde los controladores y las vistas se guardan en carpetas que usan convenciones de nomenclatura para definir las relaciones. Esta estructura es compatible con las necesidades de la mayoría de las aplicaciones web.

Sin embargo, algunas aplicaciones pueden tener un gran número de controladores y cada controlador puede estar asociado a varias vistas. En estos tipos de aplicaciones, la estructura de proyecto predeterminada de ASP.NET MVC puede resultar difícil de controlar.

Para proyectos grandes, ASP.NET MVC permite particionar las aplicaciones web en unidades más pequeñas que se denominan áreas. Las áreas permiten dividir una aplicación web grande de MVC en agrupaciones funcionales más pequeñas. De hecho, un área es una estructura de aplicación de MVC dentro de una aplicación. Una aplicación podría contener varias estructuras (áreas) MVC.

Por ejemplo, una única aplicación de comercio electrónico grande podría estar dividida en áreas que representan el escaparate, las revisiones del producto, la administración de las cuentas de usuario y el sistema de compras. Cada área representa una función independiente de la aplicación global.

Este tutorial muestra cómo implementar áreas en una aplicación de ASP.NET MVC. El tutorial crea el marco funcional para un sitio de blog que tiene las siguientes áreas:

  • Main. Este es el punto de entrada a la aplicación web. Esta área incluye la página de inicio y una característica de inicio de sesión.

  • Blog. Esta área se usa para mostrar las entradas de blog y realizar búsquedas en el archivo.

  • Dashboard. Esta área se utiliza para crear y modificar las entradas de blog.

Para que este tutorial resulte sencillo, las áreas no contienen la lógica para realizar las tareas reales del blog.

Hay un proyecto de Visual Studio con código fuente disponible para este tema: Descargar.

Para poder completar este tutorial, necesitará:

  • Microsoft Visual Studio 2008 Service Pack 1 o Visual Web Developer 2008 Express Edition Service Pack 1 o una versión posterior.

  • El marco de ASP.NET MVC 2. Si ha instalado Visual Studio 2010, ASP.NET MVC 2 ya está instalado en su equipo. Para descargar la versión más actualizada del marco, vea la página de descarga de ASP.NET MVC.

En este tutorial se supone que está familiarizado con ASP.NET MVC. Para obtener más información, vea ASP.NET MVC 2.

Para comenzar, creará un proyecto ASP.NET MVC y agregará la estructura de carpetas para dos áreas secundarias (Blog y Dashboard).

Para crear la estructura de aplicación

  1. En Visual Studio, en el menú Archivo, haga clic en Nuevo proyecto.

  2. En la ventana Tipos de proyecto, expanda el nodo Visual Basic o el nodo Visual C# y, a continuación, seleccione el nodo Web.

  3. En la ventana Plantillas, seleccione Aplicación web de ASP.NET MVC 2.

  4. Denomine el proyecto MvcAreasApplication, establezca la ubicación del proyecto y, a continuación, active la casilla Crear directorio para la solución.

  5. Haga clic en Aceptar.

  6. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto, seleccione Agregar y haga clic en Área.

  7. En Nombre de área, escriba Blog y haga clic en Agregar.

    Se agrega al proyecto una carpeta denominada Áreas. La carpeta Áreas contiene una estructura de carpetas que permite que cada área secundaria posea sus propios modelos, vistas y controladores.

  8. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto, seleccione Agregar y haga clic en Área.

  9. En Nombre de área, escriba Dashboard y haga clic en Agregar.

    Cuando haya terminado, la carpeta Áreas contendrá dos áreas secundarias, Blog y Panel.

Ahora, agregará controladores habilitados para áreas y métodos de acción para cada área.

Para agregar controladores de área

  1. En el Explorador de soluciones, haga clic con el botón secundario en la subcarpeta Controllers del área Blog, haga clic en Agregar y, a continuación, haga clic en Controlador.

  2. Asigne al controlador el nombre BlogController y, a continuación, haga clic en Agregar.

  3. Agregue el código siguiente a la clase BlogController.

    Este código crea dos métodos de acción, denominados ShowRecent y ShowArchive. Para que este tutorial resulte sencillo, los métodos de acción no contienen lógica para realizar tareas específicas.

  4. En el área Dashboard, haga clic con el botón secundario en la subcarpeta Controllers, haga clic en Agregar y, a continuación, haga clic en Controlador.

  5. Asigne al controlador el nombre DashboardController y haga clic en Agregar.

  6. Agregue el código siguiente a la clase DashboardController.

    Este código crea dos métodos de acción, denominados AddPost y EditPost. Para que este tutorial resulte sencillo, los métodos de acción no contienen lógica para realizar tareas específicas.

El paso siguiente es agregar vistas habilitadas para áreas para cada método de acción.

Para agregar vistas de área

  1. Abra la clase BlogController, haga clic con el botón secundario del mouse dentro del método de acción ShowRecent, haga clic en Agregar vista y, a continuación, haga clic en Agregar.

  2. En la vista ShowRecent, agregue el siguiente marcado al contenido de la página después del encabezado:

    <p><%= Html.ActionLink("Show Archive", "ShowArchive") %></p>
    

    Este marcado crea un vínculo al método de acción ShowArchive que creó anteriormente.

  3. Haga clic con el botón secundario del mouse dentro del método ShowArchive, haga clic en Agregar vista y, a continuación, en Agregar.

  4. En la vista ShowArchive, agregue el siguiente marcado al contenido de la página después del encabezado:

    <p><%= Html.ActionLink("Show Recent", "ShowRecent") %></p>
    
  5. Abra la clase DashboardController, haga clic con el botón secundario del mouse dentro del método de acción AddPost, haga clic en Agregar vista y, a continuación, haga clic en Agregar.

  6. En la vista AddPost, agregue el siguiente marcado al contenido de la página después del encabezado:

    <p><%= Html.ActionLink("Edit Post", "EditPost") %></p>
    
  7. Haga clic con el botón secundario del mouse dentro del método EditPost, haga clic en Agregar vista y, a continuación, en Agregar.

  8. En la vista EditPost, agregue el siguiente marcado al contenido de la página después del encabezado:

    <p><%= Html.ActionLink("Add Post", "AddPost") %></p>
    

Al agregar un área a un proyecto, se define una ruta para el área en un archivo AreaRegistration. La ruta envía las solicitudes al área según la dirección URL de la solicitud. Para registrar las rutas de las áreas, se agrega código al archivo Global.asax capaz de encontrar automáticamente las rutas de área en el archivo AreaRegistration.

Para registrar las rutas del área

  1. En el Explorador de soluciones, abra el archivo Global.asax del proyecto.

  2. Inserte el código siguiente en el método Application_Start :

    AreaRegistration.RegisterAllAreas();
    

    AreaRegistration.RegisterAllAreas()
    

    Este código llama a los métodos de registro de rutas de cada área secundaria.

En una aplicación de área de ASP.NET MVC, se pueden establecer vínculos en un área exactamente igual que en cualquier aplicación de MVC. Por ejemplo, se puede llamar al método ActionLink o a cualquier otra rutina que tome un controlador o un nombre de acción (como el método RedirectToAction).

Sin embargo, para generar un vínculo a un área diferente, debe pasar explícitamente el nombre del área de destino en el parámetro routeValues de estos métodos. Por ejemplo, en el marcado siguiente se muestra un vínculo al método de acción ShowBlog de la clase BlogController. Esta llamada no identifica un área concreta.

<%= Html.ActionLink("Show Blog", "ShowBlog", "Blog") %>

El vínculo funcionará como se espera en cualquier parte del área Blog. Sin embargo, si el vínculo anterior se agrega a una vista del área Dashboard, se producirá un error. Esto se debe a que el marco de ASP.NET MVC no sería capaz de encontrar la clase BlogController en el área Dashboard.

En el siguiente ejemplo se muestra cómo crear un vínculo que identifica el área en un objeto anónimo pasado en el parámetro routeValues. Este ejemplo se muestra únicamente a modo de explicación. No lo agregue a su proyecto.

<%= Html.ActionLink("Show Blog", "ShowBlog", "Blog", new { area = "blog" }, null) %>
NotaNota:

El último parámetro null (Nothing en Visual Basic) es necesario únicamente porque las sobrecargas del método ActionLink que tienen un parámetro routeValues también tienen un parámetro htmlAttributes. Sin embargo, este parámetro no es necesario para poder vincular las áreas.

Agregar contenido al proyecto principal

Al crear la solución de Visual Studio para este tutorial, la plantilla de solución incluía una vista principal que actúa como punto de entrada para la aplicación. En esta sección del tutorial, agregará a la vista principal pestañas que crean vínculos con las áreas secundarias. También agregará código para mostrar información de diagnóstico, incluidos el nombre del controlador, el método de acción y el área con que se generó la vista actual.

Para agregar contenido al proyecto principal

  1. Abra la vista principal (Views\Shared\Site.Master).

  2. Inserte el código siguiente justo después del elemento <asp:ContentPlaceHolder ID="MainContent" runat="server" />.

    Este código agrega información de diagnóstico a las vistas.

  3. En el mismo archivo, busque el elemento <ul id="menu"> y reemplace todo el elemento con el código siguiente:

    Este código agrega las pestañas que vinculan las áreas.

Ahora ya puede compilar y probar la aplicación.

Para generar y ejecutar la aplicación

  1. Presione CTRL-F5 para compilar la solución y ejecutar la aplicación.

    La página principal de plantilla de MVC predeterminada se muestra en el explorador. La página muestra el controlador actual (Home), la acción que generó la página (Index) y el área actual, que está en blanco e indica el área principal.

  2. Haga clic en la pestaña Blog.

    Aparece la página ShowBlog. La página ShowBlog contiene un vínculo a la página ShowArchive. El controlador actual cambia a Blog. La acción es ShowBlog y el área es blog.

  3. Haga clic en Show Archive.

    Observe que el controlador y el área son los mismos, pero ahora la acción es ShowArchive.

  4. Haga clic en la pestaña Dashboard.

    Aparece la página AddPost. La página AddPost contiene un vínculo a la página EditPost. Ahora, el controlador es Dashboard, la acción es AddPost y el área es dashboard.

  5. Continúe navegando por el sitio web y observe los cambios en el controlador, la acción y el área.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2015 Microsoft