Patrón MVC. Modelo Vista Controlador

MVC es un patrón arquitectónico cuyo principal propósito es establecer una separación clara entre la interfaz de usuario que presenta la aplicación y la lógica de negocio que maneja  la aplicación. Se trata de un patrón antiguo, se remonta a los años a finales de los años 70, pero que ahora vive una nueva época de esplendor gracias a su intensa utilización en los entornos de desarrollo web.

ASP.NET MVC es el framework que propone Microsoft para el desarrollo web utilizando el patrón MVC sobre la tecnología ASP.NET. Esto, que a priori puede parecer evidente tiene una consecuencia inmediata: gran parte de los que podamos saber de ASP.NET WebForms es aplicable en ASP.NET MVC: Modelo de objetos integrado (Server, Response, Request …),Seguridad (API Membership),Modulos HTTP,Handlers …

Actualmente (abril 2013), ASP.NET se encuentra en su cuarta versión, y se ha convertido en un proyecto de código abierto: http://www.asp.net/mvc/open-source

Los elementos que componen el patrón son los siguientes:

  • El controlador. Es el elemento encargo de recibir y procesar la peticiones HTTP. Su responsabilidad es retornar una vista concreta con el modelo correcto.
  • El modelo. Corresponde con la representación de los datos/entidades de negocio que modelan la aplicación.
  • La vista. El contenido que va a ser devuelto como consecuencia de la petición HTTP. La vista recibe el modelo para poder realizar la presentación de los datos.

El siguiente diagrama ilustra el proceso.

image

Aplicado a la ASP.NET MVC, el diagrama funciona de la siguiente manera:

  • El navegador realiza un petición a una determinada URL.
  • ASP.NET MVC recibe la petición y determinar el controlador que debe ejecutarse (veremos más adelante como se realiza este proceso).
  • El controlador:
    • Recibe la petición HTTP.
    • Procesa los datos, y crea u obtiene el modelo.
    • Retorna una vista, a la que normalmente le asigna el modelo (aunque no es necesario establecer un modelo).
  • La vista que ha retornado el controlador, es interpretada por el motor de renderización de ASP.NET MVC «Razor», que procesa la vista para generar el documento HTML que será devuelto finalmente al navegador
  • El navegador muestra la página.

Nota: ASP.NET MVC dispone de varios motores de renderización – Razor, aspx, -  , en este tutorial utilizaremos Razor.

image

Nota: Los controladores pueden devolver diferentes tipos de contenido no solo documentos HTML, aunque en el dibujo se especifica únicamente HTML para simplificar el concepto.

Es por tanto, el controlador el encargado de coordinar la ejecución, generar el modelo y devolver la vista.

Veamos un ejemplo muy básico :

using System.Web.Mvc;
using DevjokerMvcTutorial.Models;

namespace DevjokerMvcTutorial.Controllers
{
    public class BasicController : Controller
    {               
        public ActionResult Index()
        {
            // Este método devuelve la vista index.cshtml, del directorio Views
            // Equivalente a return View("Index")
            return View(); 
        }
    }
}

Como podemos ver un controlador es una clase derivada de Controller, esta clase está definida en el framework de ASP.NET MVC y nos proporciona gran parte de la funcionalidad que vamos a necesitar. Entre esta funcionalidad se encuentra el método View() que nos permite devolver una vista (archivo con extensión .cshtml que será procesada por Razor)

El archivo de vista, index.cshtml tiene el siguiente aspecto (la vista puede ser un archivo html sin código Razor):

@{
    ViewBag.Title = "Index";
}
<h2>Index View</h2>
<p>Pagina index.cshtml - www.devjoker.com</p>

ASP.NET MVC hace uso intensivo de las convenciones, una de las mas importantes es la forma en la que se determina la ubicación física de las vistas. Cuando especificamos en un controlador BasicController un llamada al método View() el motor buscara una vista con el mismo nombre que el método invocado en la ruta «Views/Basic/» . De forma que si un controlador BasicController dispone de un método ProductList el método View() buscara la vista Views/Basic/ProductList.cshtml.

Pongamos algunos ejemplos con colorines para que quede claro:

Una petición con la siguiente URL:

http://localhost:5421/Basic/ProductList ejecutara el controller BasicController, método ProductList  

BasicController->ProductList->View() que devolverá la vista …

Views/Basic/ProductList.cshtml

Del mismo modo:

http://localhost:5421/Product/NewProduct  ==> ProductController->NewProduct->View() ==>Views/Product/NewProduct.cshtml

http://localhost:5421/Client/New ==> ClientController->New->View() ==>Views/Client/New.cshtml

Nota: En realidad la búsqueda de la vista comienza en el directorio Views, en el caso de no encontrarse este fichero se buscará en el directorio Shared, otra de las convecciones de ASP.NET MVC. Estudiaremos mas en detalle este comportamiento cuando veamos Razor y las vistas.

Por supuesto, podemos modificar este comportamiento – podemos ver como en este artículo http://www.variablenotfound.com/2009/06/cambiar-la-ubicacion-de-las-vistas-en.html –, aunque de momento no haremos uso de esta característica.

En el ejemplo anterior – dada su extrema simplicidad – no hemos utilizado un modelo de datos. Veamos ahora un ejemplo, también muy sencillo, en el que utilizamos un modelo. Supongamos que queremos mostrar en una página los datos de un cliente

using System;

namespace MvcApplication1.Models
{
    public class Client
    {
        public Guid Id { get; set; }
        public string FirstName { get; set; }
        public string SurName { get; set; }

    }
}

Y en el controlador añadiremos el método correspondiente para devolver el cliente:

using System;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class BasicController:Controller
    {
        public ActionResult ClientDetail()
        {
            var clientModel = new Client()
                             {
                                 Id = Guid.NewGuid(),
                                 FirstName = "Pedro",
                                 SurName = "Herrarte"
                             };
            return View(clientModel);
        }
    }
}

Y por último la vista, ClientDetail.cshtml , en la que incluimos el código necesario para mostrar los datos del cliente que inyectamos como modelo en el controlador:

@model MvcApplication1.Models.Client

<!DOCTYPE html>

<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <div>
            <h1>Datos de cliente</h1>
            <div>
                @*Código Razor, muestra la propiedad id del módelo*@
                @Html.LabelFor(m=>m.Id)
                @Html.TextBoxFor(m=> m.Id)  
            </div>
            <div>
                @*Código Razor, muestra la propiedad FirstName del módelo*@
                @Html.LabelFor(m=>m.FirstName)
                @Html.TextBoxFor(m=> m.FirstName)
            </div>
            <div>
                @*Código Razor, muestra la propiedad SurName del módelo*@
                @Html.LabelFor(m=>m.SurName)
                @Html.TextBoxFor(m=> m.SurName)
            </div>
        </div>
    </body>
</html>

Ejecutamos la aplicación y  en nuestro navegador introducimos la URL siguiente: http://localhost:3072/Basic/ClientDetail (la raiz de la url depende de la configuración del proyecto) y el resultado de la ejecución seria esta:

image

En los siguientes capítulos del tutorial ampliando nuestros conocimientos de cada uno de los elementos de ASP.NET MVC.

Pedro  Herrarte  Sánchez
Patrón MVC. Modelo Vista Controlador
Pedro Herrarte Sánchez

Pedro Herrarte, es consultor independiente, ofreciendo servicios de consultoría, análisis, desarrollo y formación. Posee mas de diez años de experiencia trabajando para las principales empresas de España. Es especialista en tecnologías .NET, entornos Web (ASP.NET, ASP.NET MVC,jQuery, HTML5), bases de datos (SQL Server y ORACLE) e integración de sistemas. Es experto en desarrollo (C#, VB.Net, T-SQL, PL/SQL, , ASP, CGI , C, Pro*C, Java, Essbase, Vignette, PowerBuilder y Visual Basic ...) y bases de datos (SQL Server y ORACLE). Pedro es MCP y MAP 2012, es fundador, diseñador y programador de www.devjoker.com..
Fecha de alta:14/04/2013
Última actualizacion:28/04/2013
Visitas totales:35315
Valorar el contenido:
Últimas consultas realizadas en los foros
Últimas preguntas sin contestar en los foros de devjoker.com