INTRODUCCIN A ASP.

NET MVC 4
Aunque no hayas estudiado patrones de diseo, es altamente probable de que, si te
dedicas a la programacin, hayas odo hablar en alguna ocasin del Modelo-VistaControlador. Se trata de uno de los patrones de diseo ms ubicuos y populares, que
persigue la filosofa de crear un patrn de tres capas que diferencian las labores de la
aplicacin en:

MODELO: Gestiona la informacin que el usuario precisa, es

decir qu informacinquiere el usuario.

VISTA: Muestra la informacin al usuario y permite que ste interacte con ella,
proporcionando datos, modificndolos, solicitando su modificacin o
simplemente, consultndolos. En resumen, cmo se muestra la
informacin en pantalla.

CONTROLADOR: Acta de intermediario entre los elementos anteriores y el

usuario, atendiendo las peticiones HTTP (en el caso de ASP.NET), generando la
informacin que el usuario requiere (modelo) y mostrndola por pantalla (vista).

Microsoft proporciona una implementacin estndar de este patrn permitiendo crear

un proyecto basado en web que genera automticamente estos tres elementos,
separando de una forma ms clara la funcionalidad interna de la aplicacin de la
gestin de las peticiones y su visualizacin en pantalla.

Creando un proyecto MVC

A continuacin 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
continuacin: Framework 4.5, lenguaje deseado (en este caso lo haremos en C#) y
como opcin, ASP.NET MVC 4 Web Application.

A continuacin seleccionaremos la plantilla que queremos utilizar: podemos crear

desde un proyecto vaco hasta una aplicacin para internet u orientado a web.
Nuestro objetivo ser hacer uso de una aplicacin predeterminada para internet, por lo
que seleccionaremos la opcin Internet Application y marcaremos como motor de
vistas el motorRazor (por defecto y ms aconsejable).
Con esto generaremos una plantilla estndar que contendr una pgina web por
defecto y una infraestructura para que los usuarios realicen el inicio y finalizacin de
sesin 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 extensin .Tests.

Ahora slo 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 (aplicacin web y tests unitarios) que proporcionan un nutrido
grupo de carpetas que ya pertenece a nuestra aplicacin.

Pese a que todas ellas son importantes, haremos especial mencin 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 mapearn 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 sern generadas de forma dinmica por el
controlador correspondiente y se cumplimentarn 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 aplicacin web, ya que el
controlador es la clase que aglutina la verdadera funcionalidad de la
aplicacin. De hecho, realizar prcticamente todas las operaciones
exceptuando la visualizacin y el modelado de la informacin. Los controladores
sern, adems, el objetivo principal de las pruebas unitarias, que veremos ms
adelante.

Ejecutando la aplicacin por defecto

A estas alturas no hay nada que nos impida ejecutar la aplicacin 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 aplicacin, por
ejemplo Google Chrome.

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

Como podemos observar, nuestra aplicacin se compone por una pgina de inicio en la
que podemos diferenciar diferentes secciones:

Una parte superior con una imagen que se corresponder con el logo de la
aplicacin, un enlace de registro y otro de entrada a la aplicacin y tres enlaces:

uno a la pgina de inicio (la actual), otra de Acerca de y una ltima de datos
de contacto. Quedmonos con el detalle de que si pulsamos por ejemplo el
enlace About nos trasladar a la rutalocalhost/Home/About. Luego lo
explicaremos con ms detalle.

Un pie de pgina con los datos de Copyright.

Un cuerpo, que se corresponde al contenido de la pgina en s.

Desgranemos ahora MVC paso a paso para aprender cmo funciona ASP.NET
comenzando por el principio: la invocacin HTTP.

Controlador
Si abrimos la carpeta Controllers observaremos la existencia de dos
clases: AccountController yHomeController. La primera clase se encargar del gestin
de cuentas que MVC proporciona por defecto, pero por ahora lo ignoraremos vilmente.
Centrmonos pues en la clase HomeController y abramos el fichero. Su contenido es el
siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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 mtodos. Cada uno de estos mtodos devuelve un objeto de la
clase ActionResult y no recibe ningn parmetro de entrada.
Grosso modo podemos afirmar que cada uno de estos mtodos atienden las peticiones
HTTP, ejecutan la lgica de la aplicacin que le proporcionemos y a continuacin
generarn la vista correspondiente, pasndole, de forma opcional (que an no es el
caso, ya lo veremos ms adelante) un modelo con los datos que el usuario solicite.
Vimos ms arriba que si pulsamos el enlace About la aplicacin nos llevar a la
rutalocalhost/Home/About. Podemos desgranar esta ruta indicando que:

Localhost es la ruta relativa de la aplicacin que estamos ejecutando.

Home es el nombre del controlador que manejar la peticin.

About es el nombre del nombre del mtodo del controlador que manejar la
peticin.

Por lo tanto, si pulsamos el botn About, lo que realmente estaremos haciendo

(recordemos: siempre a grandes rasgos; profundizaremos en ello en posteriores
artculos) ser invocar el mtodo About() de la clase HomeController, que realizar dos
operaciones:

Aadir la cadena Your app description page. a la

propiedad Message del ViewBag.

Devolver la vista asociada al mtodo 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 mtodo del controlador?

Vista
Comenzaremos por explicar qu es el ViewBag. Si conocemos las versiones anteriores
de .NET, podramos explicarlo como una evolucin del objeto ViewData que
centraliza y simplifica el transporte de informacin entre el controlador y la vista.

Tanto lo simplifica que ni siquiera es necesario declarar sus elementos. Debido al

enlazado dinmico, es posible aadir un atributo en el controlador y usarlo, una vez
compilada la aplicacin (CTRL + SHIFT + B), en la vista correspondiente.
Por ejemplo, codificaremos lo siguiente en nuestra clase HomeController:

1
2
3
4
5
6
7
8

public ActionResult About()

{
ViewBag.Message = "Your app description page.";
ViewBag.PropiedadDinamicaCadena = "Me acabo de inventar esta
propiedad.";
ViewBag.PropiedadDinamicaNumerica = 3;
return View();
}

A continuacin, haremos una compilacin rpida (recordemos, CTRL + SHIFT + B) y

abriremos el fichero con la vista correspondiente (que en este ejemplo se encuentra en
la rutaViews/Home/About.cshtml), aadiendo lo siguiente:

1
2
3
4

<p>

La propiedad "PropiedadDinamicaCadena" vale "@ViewBag.PropiedadDinamicaCadena".<b

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 smbolo arroba (@) a la palabra ViewBag e indicando
el nombre de la propiedad a continuacin, separndolo con un punto.
Si ejecutamos la aplicacin y pulsamos en el enlace About, veremos el siguiente
resultado:

En cuanto a la segunda duda, referente a la vista que se corresponde al mtodo del

controlador, vemos que tambin sigue la norma de alojarse en la
ruta Views/Controlador/Mtodo.cshtml.
La extensin cshtml se corresponde a las vistas de la plantilla Razor, que ya veremos
en otra ocasin.

Modelo
Vale, hemos visto el controlador y la vista, pero dnde est el modelo? La respuesta
directa es: en ningn lado.
No hemos hecho uso de l, ya que hemos puenteado su funcin a travs
del ViewBag. Este componente est pensado para pasar a la vista informacin
auxiliar no relacionada con el negocio, tales como datos calculados, el ttulo de la
pgina e informacin 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 opcin 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 debera llamarse AboutModel, del siguiente modo:

A continuacin podremos introducir en esta clase las propiedades que estimemos

oportunas.
Para aadir una propiedad, nos serviremos del Intellisense de Visual Studio, para lo
cual escribiremos la palabra prop y a continuacin pulsaremos la tecla TAB. Esto har
que automticamente se genere una propiedad que podremos cumplimentar
cambiando tan slo nombre y tipo.

Crearemos unas cuantas propiedades: nombre, ao actual, e-mail y pgina web:

1
2
3

public class AboutModel

{
public string Nombre { get; set; }
public string Email { get; set; }

4
5
6
7

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 descripcin del patrn de diseo que la peticin 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 invocacin al mtodo View() que se encargaba de crear la
vista, pero an nos quedan tres flecos sueltos:

Cmo el controlador rellena el modelo.

Cmo la vista obtiene la informacin del modelo.

Cmo la vista presenta por pantalla la informacin del modelo.

La respuesta a la primera pregunta se responde mediante el siguiente cdigo, que se

corresponder al mtodo About de la clase HomeController:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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, aadir la referencia al espacio de

nombres donde se encuentran los modelos. Para ello pulsaremos sobre el men
contextual desplegado bajoAboutModel y seleccionaremos la opcin using
MvcApp.Models.
Esto agregar automticamente la referencia necesaria a nuestro cdigo.

Lo que hacemos es simple: crear un nuevo modelo, rellenar sus propiedades y pasarle
ese mismo modelo como parmetro al mtodo View(), de modo que ste pueda
acceder a los datos contenidos en l.
Por supuesto, en la prctica seguramente realizaremos un procesamiento mucho ms
complejo (invocacin a base de datos, enlazado dinmico, etc.), pero nuestro objetivo
es mostrar el funcionamiento bsico de MVC, por lo que ser suficiente por ahora.
Realizada la conexin 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
operacin.
Sin embargo, las vistas son plantillas DHTML, por lo que la clusula 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 minsculas) y
el nombre de la clase que representa el modelo que queremos representar. Por lo
tanto, abriremos el fichero Views/Home/About.cshtml y aadiremos el siguiente cdigo:

@model MvcApp.Models.AboutModel

A continuacin, tal y como hicimos con el ViewBag, mostramos la informacin 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
maysculas).

1
2
3
4
5
6
7
8
9
10
11

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

</p>
<p>

Direccin web: @Model.PaginaWeb

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

</p>

Si ejecutamos la aplicacin, veremos el siguiente resultado:

Y con esto termina nuestra introduccin al framework MVC 4 de Microsoft. En

posteriores artculos profundizaremos un poco ms en el concepto de las pruebas
unitarias, as como en cada uno de los elementos que conforman MVC.
About these ads

http://danielggarcia.wordpress.com/2013/11/11/introduccion-a-asp-net-mvc-4/