Este artículo describe el patrón (pattern) MVC, específicamente la implementación de Microsoft ASP.NET MVC, muy utilizado en ambiente web.
Empecemos por decir que la sigla corresponde a Model-View-Controller (modelo-vista-controlador), ahora veamos en detalle cada uno de estos tres elementos, como introducción teórica y antes de ver un ejemplo práctico.
Modelo
Representa una entidad lógica, es una unidad de información sobre la cual actuarà el controlador,
Vista
Se ocupa de la representación gráfica del modelo, en práctica es lo que el usuario final ve cuando navega un sitio.
Controlador
Dentro el controlador se realizan todas las operaciones de business logic, es el corazón de la aplicación web.
Tambien aquí dentro se conecta eventualmente a bases de datos u otras fuentes de información. La implementación clásica de ASP.NET MVC prevee como acción final del controlador, la valorización de un modelo, que será; mostrado traves de la vista.
ASP.NET MVC4
Pasemos a la parte práctica, necesitamos descargar como mínimo Visual Studio 2010 Express (mejor la versión 2012) y MVC 4 (http://www.asp.net/mvc) para comenzar, estos programas son gratuitos.
Luego de la instalación, procedemos a crear un nuovo projecto de tipo MVC4
Vemos que por defecto nos ha creado un sitio completo, con varios modelos, vistas y controladores.
Abramos el archivo RouteConfig.cs, al interno de la carpeta App_Start:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Este metodo es ejecutado al inizio de la aplicación, a traves de la clase Global.asax.
Podemos observar la declaración por defecto de las url, o la estructura que tendran las direcciones del sitio.
Esto significa que si abrimos a traves del browser la dirección http://<nuestrositio>/Home/Index
en realidad le estamos diciendo a la aplicación de ejecutar el método Index, que se encuentra en el controlador
HomeController, el controlador ejecutarà todas las operaciones que contiene, y luego pasara la informacivn a la vista Index.aspx, que visualizarà dicha información, utilizando la plantilla que se encuentra en la pagina master.
Ahora vamos a crear un nuevo metodo, per ver mas claro como funziona el framework MVC4.
Comencemos por uno de los controladores, HomeController, y veamos como pasa la informacón se encapsula dentro un modelo y pasa
hacia la vista, donde es representada en formato web. Para esto crearemos un nuevo modelo (Empleado). Podriamos usar como ejemplo uno de los existentes, pero de este modo vemos el proceso completo. Entonces creamos la clase Empleado dentro la carpeta Model:
public class Empleado
{
public string Nombre { get; set; }
public string Apellidos { get; set; }
public string Direccion { get; set; }
public string Ciudad { get; set; }
public string Pais { get; set; }
public string Email { get; set; }
}
Luego abrimos el controlador , aquí vemos que hay algunos metodos que retornan un objeto ActionResult, todos estos metodos
se denominan «action» y, en general, por cada uno de estos metodos hay una vista asociada, que tiene el mismo nombre de dicho metodo.
ActionResult es solo uno de los tipos de resultado que puede producir un metodo action, existen otros como File (util para descargar archivos),
JsonResult (retorna objetos de tipo Json, muy usado para las llamadas Ajax), etc. Tambien es posibile generar resultados de otro tipo,
extendiendo el framwork MVC y creando nuestros propios resultados, por ejemplo de tipo Excel. Esto lo veremos en un articulo sucesivo.
Creamos entonces un nuevo método, al que llamamos VerEmpleado:
public ActionResult VerEmpleado()
{
ViewBag.Titulo = "Detalle del empleado.";
Empleado empleado = new Empleado() { Nombre = "Fernando", Apellidos ="Arturi", Direccion ="Pasaje Rinaldi",
Ciudad = "LDZ", Pais="Argentina", Email=" zzzz@pppp.com"};
return View(empleado);
}
donde inicializamos la clase empleado, y la cargamos con información de prueba, obviamente en la realidad en este punto habría que realizar alguna interrogación a una base de datos u otra fuente de informaciòn para recuperar los datos del empleado.
es el momento de crear una vista, que serà la encargada de visualizar los datos del empleado.
Haciendo click con el botòn derecho del mouse sobre el metodo VerEmpleado, seleccionamos «AddView»
Seleccionamos la opciòn «Create a strongly-types view» para asociar la vista con nuestro modelo de datos, la clase Empleado. Tambien seleccionamos la opciòn «Use a layout or master page» para asociar a la vista la pàgina master del sitio, dandole un aspecto similar al resto de las paginas.
El resultado es la creación del archivo VerEmpleado.aspx
Aquí nos detendremos en algunas de las particularidades de la vista:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Mvc4_1.Models.Empleado>" %>
La primera linea es muy importante, no solo vemos que la vista está asociada a una pàgina master, además hereda nuestra clase modelo, Empleado.
Esta característica permite que, en el interior de la vista, se puede hacer referencia a este modelo a través de la palabra clave Model.
<div class=”display-label”>
<%: Html.DisplayNameFor(model => model.Nombre) %>
</div>
<div>
<%: Html.DisplayFor(model => model.Nombre) %>
</div>
Podemos notar como, a traves del HtmlHelper, se escriben dinamicamente el nombre de los campos del modelo y el valor de los mismos.
Finalmente, si deseamos ver en acciòn lo que hemos hecho, presionamos F5 y parte el sitio, en modalidad «debugging».
La pàgina por defecto es la pàgina principal del sitio /Home/Index, pero si modificamos la direcciòn a /Home/VerEmpleado
vemos nuestra pagina:
Esta ha sido solamente una introducciòn al tema, que es mucho mas amplio, en futuro veremos cosas mas complejas de este framework.