Introducción a ASP.NET MVC 4


Aunque no hayas estudiado patrones de diseño, es altamente probable de que, si te dedicas a la programación, hayas oído hablar en alguna ocasión del Modelo-Vista-Controlador. Se trata de uno de los patrones de diseño más ubicuos y populares, que persigue la filosofía de crear un patrón de tres capas que diferencian las labores de la aplicación en:

  • MODELO: Gestiona la información que el usuario precisa, es decir qué información quiere el usuario.
  • VISTA: Muestra la información al usuario y permite que éste interactúe con ella, proporcionando datos, modificándolos, solicitando su modificación o simplemente, consultándolos. En resumen, cómo se muestra la información en pantalla.
  • CONTROLADOR: Actúa de intermediario entre los elementos anteriores y el usuario, atendiendo las peticiones HTTP (en el caso de ASP.NET), generando la información que el usuario requiere (modelo) y mostrándola por pantalla (vista).

Microsoft proporciona una implementación estándar de este patrón permitiendo crear un proyecto basado en web que genera automáticamente estos tres elementos, separando de una forma más clara la funcionalidad interna de la aplicación de la gestión de las peticiones y su visualización en pantalla.

Creando un proyecto MVC

A continuación crearemos un proyecto en ASP.NET MVC 4 con Visual Studio 2012. Para ello pulsaremos sobre New Project y seleccionaremos las opciones que vemos a continuación: Framework 4.5, lenguaje deseado (en este caso lo haremos en C#) y como opción, ASP.NET MVC 4 Web Application.

A continuación seleccionaremos la plantilla que queremos utilizar: podemos crear desde un proyecto vacío hasta una aplicación para internet u orientado a web.

Nuestro objetivo será hacer uso de una aplicación predeterminada para internet, por lo que seleccionaremos la opción Internet Application y marcaremos como motor de vistas el motor Razor (por defecto y más aconsejable).

Con esto generaremos una plantilla estándar que contendrá una página web por defecto y una infraestructura para que los usuarios realicen el inicio y finalización de sesión en nuestro sitio web.

Una vez hecho esto, si deseamos crear un proyecto de pruebas unitarias (aconsejable), marcaremos la casilla Create a unit test Project y le asignaremos un nombre, que por lo general será el mismo del proyecto con la extensión .Tests.

Ahora sólo debemos esperar pacientemente a que el proyecto se genere con los recursos y componentes por defecto. Dependiendo del entorno de desarrollo, esto puede tardar unos cuantos minutos, por lo que esperaremos a que el proceso finalice para ponernos manos a la obra.

Si todo ha ido bien, podremos comprobar que en el explorador de soluciones se han creado dos proyectos (aplicación web y tests unitarios) que proporcionan un nutrido grupo de carpetas que ya pertenece a nuestra aplicación.

Pese a que todas ellas son importantes, haremos especial mención a tres de ellas:

  • Models: almacenará las clases correspondiente a los modelos. Se corresponden con un conjunto de clases simples compuestas generalmente por un conjunto de propiedades que se mapearán respecto a una fuente de datos.
  • Views: almacenará las plantillas correspondientes a las vistas. Se corresponden con un conjunto de documentos HTML + JavaScript + CSS que serán generadas de forma dinámica por el controlador correspondiente y se cumplimentarán a partir de los datos de uno (o varios) de los modelos.
  • Controllers: almacenará las clases correspondientes a los controladores. En esta carpeta es donde se concentra “la chicha” de la aplicación web, ya que el controlador es la clase que aglutina la verdadera funcionalidad de la aplicación. De hecho, realizará prácticamente todas las operaciones exceptuando la visualización y el modelado de la información. Los controladores serán, además, el objetivo principal de las pruebas unitarias, que veremos más adelante.

Ejecutando la aplicación por defecto

A estas alturas no hay nada que nos impida ejecutar la aplicación generada por defecto. En la parte superior de la pantalla podemos observar la existencia de un desplegable que muestra nuestro navegador por defecto. Pulsaremos en él y seleccionaremos el navegador en el que queremos ejecutar nuestra aplicación, por ejemplo Google Chrome.

Si todo es correcto, se abrirá una nueva ventana con el contenido de nuestra aplicación en la dirección http://localhost:XXXXX (el puerto será aleatorio), que mostrará algo similar a lo siguiente:

Como podemos observar, nuestra aplicación se compone por una página de inicio en la que podemos diferenciar diferentes secciones:

  • Una parte superior con una imagen que se corresponderá con el logo de la aplicación, un enlace de registro y otro de entrada a la aplicación y tres enlaces: uno a la página de inicio (la actual), otra de “Acerca de…” y una última de datos de contacto. Quedémonos con el detalle de que si pulsamos por ejemplo el enlace About nos trasladará a la ruta localhost/Home/About. Luego lo explicaremos con más detalle.
  • Un pie de página con los datos de Copyright.
  • Un cuerpo, que se corresponde al contenido de la página en sí.

Desgranemos ahora MVC paso a paso para aprender cómo funciona ASP.NET comenzando por el principio: la invocación HTTP.

Controlador

Si abrimos la carpeta Controllers observaremos la existencia de dos clases: AccountController y HomeController. La primera clase se encargará del gestión de cuentas que MVC proporciona por defecto, pero por ahora lo ignoraremos vilmente. Centrémonos pues en la clase HomeController y abramos el fichero. Su contenido es el siguiente:


    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }

Como podemos ver, HomeController hereda de la clase Controller y proporciona tres métodos. Cada uno de estos métodos devuelve un objeto de la clase ActionResult y no recibe ningún parámetro de entrada.

Grosso modo podemos afirmar que cada uno de estos métodos atienden las peticiones HTTP, ejecutan la lógica de la aplicación que le proporcionemos y a continuación generarán la vista correspondiente, pasándole, de forma opcional (que aún no es el caso, ya lo veremos más adelante) un modelo con los datos que el usuario solicite.

Vimos más arriba que si pulsamos el enlace About la aplicación nos llevará a la ruta localhost/Home/About. Podemos desgranar esta ruta indicando que:

  • Localhost es la ruta relativa de la aplicación que estamos ejecutando.
  • Home es el nombre del controlador que manejará la petición.
  • About es el nombre del nombre del método del controlador que manejará la petición.

Por lo tanto, si pulsamos el botón About, lo que realmente estaremos haciendo (recordemos: siempre a grandes rasgos; profundizaremos en ello en posteriores artículos) será invocar el método About() de la clase HomeController, que realizará dos operaciones:

  • Añadir la cadena “Your app description page.” a la propiedad Message del ViewBag.
  • Devolver la vista asociada al método del controlador.

Seguramente hemos entendido perfectamente las dos operaciones realizadas, pero del mismo modo, seguro que nos asaltan dos dudas asociadas: ¿qué es eso del ViewBag? Y ¿qué vista está asociada al método del controlador?

Vista

Comenzaremos por explicar qué es el ViewBag. Si conocemos las versiones anteriores de .NET, podríamos explicarlo como una evolución del objeto ViewData que centraliza y simplifica el transporte de información entre el controlador y la vista.

Tanto lo simplifica que ni siquiera es necesario declarar sus elementos. Debido al enlazado dinámico, es posible añadir un atributo en el controlador y usarlo, una vez compilada la aplicación (CTRL + SHIFT + B), en la vista correspondiente.

Por ejemplo, codificaremos lo siguiente en nuestra clase HomeController:


        public ActionResult About()
        {
            ViewBag.Message = "Your app description page.";
            ViewBag.PropiedadDinamicaCadena = "Me acabo de inventar esta propiedad.";
            ViewBag.PropiedadDinamicaNumerica = 3;

            return View();
        }

A continuación, haremos una compilación rápida (recordemos, CTRL + SHIFT + B) y abriremos el fichero con la vista correspondiente (que en este ejemplo se encuentra en la ruta Views/Home/About.cshtml), añadiendo lo siguiente:


    <p>
        La propiedad "PropiedadDinamicaCadena" vale "@ViewBag.PropiedadDinamicaCadena".<br />
        Sumarle 10 a "PropiedadDinamicaNumerica" proporciona el valor @(ViewBag.PropiedadDinamicaNumerica + 10).
    </p>

Como podemos observar, es posible que la vista acceda al objeto ViewBag anteponiendo el símbolo arroba (@) a la palabra ViewBag e indicando el nombre de la propiedad a continuación, separándolo con un punto.

Si ejecutamos la aplicación y pulsamos en el enlace About, veremos el siguiente resultado:

En cuanto a la segunda duda, referente a la vista que se corresponde al método del controlador, vemos que también sigue la norma de alojarse en la ruta Views/Controlador/Método.cshtml.

La extensión cshtml se corresponde a las vistas de la plantilla Razor, que ya veremos en otra ocasión.

Modelo

Vale, hemos visto el controlador y la vista, pero ¿dónde está el modelo? La respuesta directa es: en ningún lado.

No hemos hecho uso de él, ya que hemos “puenteado” su función a través del ViewBag. Este componente está pensado para pasar a la vista información auxiliar no relacionada con el negocio, tales como datos calculados, el título de la página e información similar.

Si queremos utilizar datos de negocio, haremos uso del modelo, para lo cual necesitaremos crear una clase para ello. Nos dirigiremos, por lo tanto, a la carpeta Models, haremos click derecho sobre ella y seleccionaremos la opción Add… > Class.

Es aconsejable respetar la nomenclatura de la arquitectura MVC, por lo que si los controladores se llaman AboutController, las vistas reciben el nombre AboutView, el modelo debería llamarse AboutModel, del siguiente modo:

A continuación podremos introducir en esta clase las propiedades que estimemos oportunas.

Para añadir una propiedad, nos serviremos del Intellisense de Visual Studio, para lo cual escribiremos la palabra prop y a continuación pulsaremos la tecla TAB. Esto hará que automáticamente se genere una propiedad que podremos cumplimentar cambiando tan sólo nombre y tipo.

Crearemos unas cuantas propiedades: nombre, año actual, e-mail y página web:


    public class AboutModel
    {
        public string Nombre { get; set; }
        public string Email { get; set; }
        public string PaginaWeb { get; set; }
        public int AnioActual { get; set; }
    }

Hecho esto, nuestro modelo está listo. Es hora que nuestro controlador haga su trabajo.

Controlador y Modelo

Vimos en la descripción del patrón de diseño que la petición del usuario instancia el controlador, que se encarga de rellenar el modelo y de crear la vista.

Hemos visto el segundo paso previamente cuando descubrimos que el valor devuelto por el controlador es una invocación al método View() que se encargaba de crear la vista, pero aún nos quedan tres flecos sueltos:

  • Cómo el controlador rellena el modelo.
  • Cómo la vista obtiene la información del modelo.
  • Cómo la vista presenta por pantalla la información del modelo.

La respuesta a la primera pregunta se responde mediante el siguiente código, que se corresponderá al método About de la clase HomeController:


        public ActionResult About()
        {
            // Datos del ViewBag
            ViewBag.Message = "Your app description page.";
            ViewBag.PropiedadDinamicaCadena = "Me acabo de inventar esta propiedad.";
            ViewBag.PropiedadDinamicaNumerica = 3;

            // Datos del modelo
            AboutModel model = new AboutModel();
            model.Nombre = "Dani Garcia";
            model.Email = "contacto {at} danigarcia {dot} org";
            model.PaginaWeb = "http://danigarcia.org";
            model.AnioActual = 2013;

            return View(model);
        }

Es necesario, sin embargo, como paso previo, añadir la referencia al espacio de nombres donde se encuentran los modelos. Para ello pulsaremos sobre el menú contextual desplegado bajo AboutModel y seleccionaremos la opción using MvcApp.Models.

Esto agregará automáticamente la referencia necesaria a nuestro código.

Lo que hacemos es simple: crear un nuevo modelo, rellenar sus propiedades y pasarle ese mismo modelo como parámetro al método View(), de modo que éste pueda acceder a los datos contenidos en él.

Por supuesto, en la práctica seguramente realizaremos un procesamiento mucho más complejo (invocación a base de datos, enlazado dinámico, etc.), pero nuestro objetivo es mostrar el funcionamiento básico de MVC, por lo que será suficiente por ahora. Realizada la conexión entre controlador y modelo, es hora de pasar a la vista para mostrar el contenido del modelo.

Vista y Modelo

Hemos visto que desde el controlador ha sido necesario referenciar el modelo que queremos utilizar (su espacio de nombres). Desde la vista realizaremos la misma operación.

Sin embargo, las vistas son plantillas DHTML, por lo que la cláusula using seguida del espacio de nombres no nos servirá. Para realizar la referencia, haremos uso nuevamente de la arroba (@) seguida de la palabra reservada model (en minúsculas) y el nombre de la clase que representa el modelo que queremos representar. Por lo tanto, abriremos el fichero Views/Home/About.cshtml y añadiremos el siguiente código:


        @model MvcApp.Models.AboutModel

A continuación, tal y como hicimos con el ViewBag, mostramos la información que hemos codificado en el modelo y rellenado en el controlador. El acceso al modelo se realizará mediante la arroba y la palabra reservada Model (con la primera m en mayúsculas).


    <p>
        Nombre: @Model.Nombre (CC) @Model.AnioActual
    </p>

    <p>
        Dirección web: @Model.PaginaWeb
    </p>

    <p>
        E-Mail: @Model.Email
    </p>

Si ejecutamos la aplicación, veremos el siguiente resultado:

Y con esto termina nuestra introducción al framework MVC 4 de Microsoft. En posteriores artículos profundizaremos un poco más en el concepto de las pruebas unitarias, así como en cada uno de los elementos que conforman MVC.

Anuncios

5 comments

  1. puede hacer un master page con ASP.NET MVC 4 O 5 y hacer un template con CSS diferente con menu alos lados con ese mismo tipo de aplicacion que has echo de ejemplo para ver como se integra en este tipo de proyecto ya que aqui se maneja razor y otras cosas y no e visto un ejemplo que indique como hacer eso en MVC 4 o 5

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