Descripción de los modelos, vistas y controladores (C#)

por Stephen Walther

¿Confusión sobre modelos, vistas y controladores? En este tutorial, Stephen Walther le presenta las distintas partes de una aplicación ASP.NET MVC.

En este tutorial se proporciona información general de alto nivel de los modelos, vistas y controladores de ASP.NET MVC. En otras palabras, explica las M', V' y C' en ASP.NET MVC.

Después de leer este tutorial, comprenderá cómo funcionan conjuntamente las distintas partes de una aplicación ASP.NET MVC. También comprenderá cómo la arquitectura de una aplicación ASP.NET MVC difiere de la de una aplicación ASP.NET Web Forms o una aplicación Active Server Pages.

La aplicación ASP.NET MVC de ejemplo

La plantilla predeterminada de Visual Studio para crear aplicaciones web de ASP.NET MVC incluye una aplicación de ejemplo extremadamente simple que se puede usar para comprender las distintas partes de una aplicación ASP.NET MVC. En este tutorial usaremos esta sencilla aplicación.

Para crear una aplicación ASP.NET MVC con la plantilla MVC, inicie Visual Studio 2008 y seleccione la opción de menú Archivo, Nuevo proyecto (vea la figura 1). En el cuadro de diálogo Nuevo proyecto, en Tipos de proyecto (Visual Basic o C#), seleccione su lenguaje de programación favorito y, en Plantillas, elija Aplicación web ASP.NET MVC. Haga clic en el botón Aceptar .

Figura 01: Cuadro de diálogo Nuevo proyecto (haga clic para ver la imagen a tamaño completo)

Al crear una aplicación ASP.NET MVC, aparece el cuadro de diálogo Crear proyecto de prueba unitaria (vea la figura 2). Este cuadro de diálogo le permite crear un proyecto aparte en la solución para probar la aplicación ASP.NET MVC. Seleccione la opción No, no crear un proyecto de prueba unitaria y haga clic en el botón Aceptar.

Figura 02: Cuadro de diálogo Crear prueba unitaria (haga clic para ver la imagen a tamaño completo)

Después de crear la nueva aplicación ASP.NET MVC, verá varias carpetas y archivos en la ventana Explorador de soluciones. En concreto, verá tres carpetas denominadas Models, Views y Controllers. Como puede adivinar por los nombres de carpeta, estas carpetas contienen los archivos para implementar modelos, vistas y controladores.

Si expande la carpeta Controllers, verá dos archivos: AccountController.vb y HomeController.vb. Si expande la carpeta Views, verá tres subcarpetas: Account, Home y Shared. Si expande la carpeta Home, verá dos archivos adicionales: About.aspx e Index.aspx (vea la figura 3). Estos archivos constituyen la aplicación de ejemplo incluida con la plantilla predeterminada de ASP.NET MVC.

Figura 03: La ventana del Explorador de soluciones (haga clic para ver la imagen a tamaño completo)

Para ejecutar la aplicación de ejemplo, seleccione la opción de menú Depurar, Iniciar depuración. O bien, presione la tecla F5.

Cuando se ejecuta por primera vez una aplicación ASP.NET, aparece el cuadro de diálogo de la figura 4 que recomienda habilitar el modo de depuración. Haga clic en el botón Aceptar y se ejecutará la aplicación.

Figura 04: Cuadro de diálogo Depuración no habilitada (haga clic para ver la imagen a tamaño completo)

Al ejecutar una aplicación ASP.NET MVC, Visual Studio inicia la aplicación en el explorador web. La aplicación de ejemplo consta de solo dos páginas: la página Index y la página About. Cuando se inicia la aplicación por primera vez, aparece la página Index (vea la figura 5). Para ir a la página Acerca de, haga clic en el vínculo de menú situado en la parte superior derecha de la aplicación.

Figura 05: La página Index (haga clic para ver la imagen a tamaño completo)

Observe las direcciones URL en la barra de direcciones del explorador. Por ejemplo, al hacer clic en el vínculo del menú Acerca de, la dirección URL de la barra de direcciones del explorador cambia a /Home/About.

Si cierra la ventana del explorador y vuelve a Visual Studio, no podrá encontrar un archivo con la ruta de acceso Home/About. Los archivos no existen. ¿Cómo es posible?

Una dirección URL no es lo mismo que una página

Al compilar una aplicación ASP.NET Web Forms tradicional o una aplicación Active Server Pages,hay una correspondencia uno a uno entre una dirección URL y una página. Si solicita una página denominada SomePage.aspx desde el servidor, es mejor que haya una página en el disco denominada SomePage.aspx. Si el archivo SomePage.aspx no existe, obtendrá el desagradable error 404 - Página no encontrada.

Al compilar una aplicación ASP.NET MVC, en cambio, no hay correspondencia entre la dirección URL que escriba en la barra de direcciones del explorador y los archivos que encuentre en la aplicación. En una aplicación ASP.NET MVC, una dirección URL corresponde a una acción de controlador en lugar de a una página del disco.

En una aplicación ASP.NET o ASP tradicional, las solicitudes del explorador se asignan a páginas. En una aplicación ASP.NET MVC, en cambio, las solicitudes del explorador se asignan a acciones del controlador. Una aplicación ASP.NET Web Forms está centrada en el contenido. Una aplicación ASP.NET MVC, en cambio, está centrada en la lógica de la aplicación.

Descripción del enrutamiento de ASP.NET

Una solicitud del explorador se asigna a una acción de controlador mediante una característica del marco ASP.NET llamada Enrutamiento de ASP.NET. El marco ASP.NET MVC usa el enrutamiento de ASP.NET para enrutar las solicitudes entrantes a acciones del controlador.

El enrutamiento de ASP.NET usa una tabla de rutas para controlar las solicitudes entrantes. Esta tabla de rutas se crea la primera ve que se inicia la aplicación web. La tabla de rutas se configura en el archivo Global.asax. El archivo MVC Global.asax predeterminado se encuentra en la lista 1.

Lista 1: Global.asax

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication1
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit https://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "Default",                                              // Route name
                "{controller}/{action}/{id}",                           // URL with parameters
                new { controller = "Home", action = "Index", id = "" }  // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

Cuando se inicia una aplicación ASP.NET por primera vez, se llama al método Application_Start(). En la lista 1, este método llama al método RegisterRoutes() y el método RegisterRoutes() crea la tabla de rutas predeterminada.

La tabla de rutas predeterminada consta de una ruta. Esta ruta predeterminada divide todas las solicitudes entrantes en tres segmentos (un segmento de dirección URL es cualquier cosa entre barras diagonales). Al primer segmento se le asigna un nombre de controlador, al segundo segmento se le asigna un nombre de acción y al segmento final se le asigna un parámetro pasado a la acción denominada Id.

Pongamos como ejemplo esta URL:

/Product/Details/3

Esta dirección URL se analiza en tres parámetros como este:

Controlador = Producto Controller = Product

Action = Details

Id = 3

La ruta predeterminada definida en el archivo Global.asax incluye valores predeterminados para los tres parámetros. El controlador predeterminado es Home, la acción predeterminada es Index y el identificador predeterminado es una cadena vacía. Teniendo en cuenta estos valores predeterminados, considere cómo se analiza la siguiente dirección URL:

/Employee

Esta dirección URL se analiza en tres parámetros como este:

Controller = Employee

Action = Index

Id =

Por último, si abre una aplicación ASP.NET MVC sin proporcionar ninguna dirección URL (por ejemplo, http://localhost), la dirección URL se analiza de la siguiente manera:

Controller = Home

Action = Index

Id =

La solicitud se enruta a la acción Index() de la clase HomeController.

Descripción de controladores

Un controlador es responsable de controlar la forma en que un usuario interactúa con una aplicación MVC. Un controlador contiene la lógica de control de flujo de una aplicación ASP.NET MVC. Un controlador determina qué respuesta se devuelve a un usuario cuando este realiza una solicitud del explorador.

Un controlador es simplemente una clase (por ejemplo, una clase de Visual Basic o de C#). La aplicación ASP.NET MVC de ejemplo incluye un controlador denominado HomeController.cs ubicado en la carpeta Controllers. El contenido del archivo HomeController.cs se reproduce en la lista 2.

Lista 2: HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Title"] = "Home Page";
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            ViewData["Title"] = "About Page";

            return View();
        }
    }
}

Observe que HomeController tiene dos métodos denominados Index() y About(). Estos dos métodos corresponden a las dos acciones expuestas por el controlador. La dirección URL /Home/Index invoca el método HomeController.Index() y la dirección URL /Home/About invoca el método HomeController.About().

Cualquier método público de un controlador se expone como una acción de controlador. Debe tener cuidado con esto. Esto significa que cualquier persona con acceso a Internet puede invocar cualquier método público contenido en un controlador escribiendo la dirección URL correcta en un explorador.

Descripción de las vistas

Las dos acciones de controlador expuestas por la clase HomeController, Index() y About(), devuelven una vista. Una vista contiene el marcado HTML y el contenido que se envía al explorador. Una vista es el equivalente de una página cuando se trabaja con una aplicación ASP.NET MVC.

Debe crear las vistas en la ubicación correcta. La acción HomeController.Index() devuelve una vista ubicada en la siguiente ruta de acceso:

\Views\Home\Index.aspx

La acción HomeController.About() devuelve una vista ubicada en la siguiente ruta de acceso:

\Views\Home\About.aspx

En general, si desea devolver una vista para una acción de controlador, debe crear una subcarpeta en la carpeta Views con el mismo nombre que el controlador. En la subcarpeta, debe crear un archivo .aspx con el mismo nombre que la acción del controlador.

El archivo de la lista 3 contiene la vista About.aspx.

Lista 3: About.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>About</h2>
    <p>
        Put content here.
    </p>
</asp:Content>

Si omite la primera línea de la lista 3, la mayor parte del resto de la vista consta de HTML estándar. Puede modificar el contenido de la vista escribiendo cualquier HTML que desee aquí.

Una vista es muy similar a una página en Active Server Pages o ASP.NET Web Forms. Una vista puede incluir contenido HTML y scripts. Puede escribir los scripts en su lenguaje de programación .NET favorito (por ejemplo, .NET para C# o Visual Basic). Los scripts se usan para mostrar contenido dinámico, como datos de la base de datos.

Descripción de los modelos

Hemos visto los controladores y las vistas. El último tema que debemos ver son los modelos. ¿Qué es un modelo MVC?

Un modelo MVC contiene toda la lógica de la aplicación que no está incluida en una vista o un controlador. El modelo debe contener toda la lógica de negocios de la aplicación, la lógica de validación y la lógica de acceso a la base de datos. Por ejemplo, si usa Microsoft Entity Framework para acceder a la base de datos, creará las clases de Entity Framework (el archivo .edmx) en la carpeta Models.

Una vista solo debe contener lógica relacionada con la generación de la interfaz de usuario. Un controlador solo debe contener la lógica mínima básica necesaria para devolver la vista correcta o redirigir al usuario a otra acción (control de flujo). Todo lo demás debe estar incluido en el modelo.

En general, hay que buscar modelos complejos y controladores simples. Los métodos de controlador deben contener solo unas pocas líneas de código. Si una acción del controlador es demasiado compleja, debe considerar la posibilidad de mover la lógica a una nueva clase en la carpeta Models.

Resumen

En este tutorial se proporciona información general de alto nivel de las distintas partes de una aplicación web ASP.NET MVC. Ha aprendido cómo el enrutamiento de ASP.NET asigna solicitudes de explorador entrantes a acciones de controlador concretas. Ha aprendido cómo los controladores orquestan cómo se devuelven las vistas al explorador. Por último, ha aprendido cómo los modelos contienen lógica de acceso a bases de datos, de validación y de negocio de aplicaciones.