gdfg

Aplicaciones Web

con

ASP.NET MVC 5

Gua del Curso

Docente: Carlos Alberto Mauricio Montes

Email: [email protected]

Visual Studio 2015 Aplicaciones Web con ASP.NET MVC 5 Gua del Curso Junio 2015

Docente: Carlos Alberto Mauricio Montes Email: [email protected] 2

Contenido

Contenido ................................................................................................................................................... 2

1. Introduccin ........................................................................................................................................ 3

1.1. El patrn Modelo-Vista-Controlador (MVC) ................................................................................. 4

1.1.1. El Controlador ...................................................................................................................... 4

1.1.2. El Modelo ............................................................................................................................. 4

1.1.3. La Vista ................................................................................................................................. 4

1.2. Ejecutar Visual Studio .................................................................................................................. 5

1.3. Primera Aplicacin MVC: Hola Mundo ......................................................................................... 6

1.3.1. Crear un proyecto MVC ........................................................................................................ 6

1.3.2. Estructura de una aplicacin MVC5 .................................................................................... 10

1.3.3. Ejecutar la aplicacin.......................................................................................................... 10

1.3.4. Asociacin entre una Peticin y el Controlador .................................................................. 12

1.3.5. Ciclo bsico de una Peticin ............................................................................................... 14

1.3.6. Agregar Controladores ....................................................................................................... 17

1.3.7. Agregar Vistas .................................................................................................................... 19

1.3.8. Terminar la ejecucin de la aplicacin................................................................................ 22

1.4. El concepto Responsive.............................................................................................................. 23

1.4.1. Bootstrap ........................................................................................................................... 24

1.5. IIS Express .................................................................................................................................. 25

2. El Controlador.................................................................................................................................... 26

2.1. El Rol del Controlador ................................................................................................................ 26

2.2. Agregar un Controlador ............................................................................................................. 26

2.3. Parmetros en los Actions ......................................................................................................... 29

3. La Vista .............................................................................................................................................. 32

3.1. El propsito de las Vistas ........................................................................................................... 32

3.2. Asociacin entre los Actions y las Vistas .................................................................................... 32

3.3. Agregar una Vista....................................................................................................................... 33

3.4. Enviar informacin del Controlador a la Vista ............................................................................ 34

3.4.1. Agregar Modelos ................................................................................................................ 35

3.4.2. ViewBag ............................................................................................................................. 37

3.4.3. Usando el Modelo para pasar objetos a la Vista ................................................................ 39



1. Introduccin

El presente material est orientado a la enseanza y aprendizaje del curso ASP.NET MVC5. Para

comprenderlo a plenitud y sacar el mayor provecho al mismo debe complementarlo necesariamente con las

clases dictadas por el profesor as como desarrollar los ejercicios que se plantean en todos los captulos

posteriores.

El objetivo principal es mostrarle, con ejercicios prcticos, los fundamentos de los temas que se indican a

continuacin, usted posteriormente podr profundizar an ms cada uno de los mismos:

MVC 5.0

Entity Framework

C#

Bootstrap

Tambin se revisar indirectamente HTML, Javascritp y Hojas de Estilo CSS. Antes de comenzar con el curso

recomiendo que revise HTML, ya que es ms que necesario su dominio a nivel intermedio.

Los conceptos tericos sern desarrollados en la prctica con la implementacin de una funcionalidad

bastante conocida en sistemas informticos Mantenimiento de Entidades que generalmente son parte del

mdulo de Administracin. Esta funcionalidad es tambin conocida como CRUD (Create, Read, Update,

Delete).

Para el desarrollo de los ejercicios se requiere Visual Studio 2015 Profesional RC, el cual contiene las

herramientas para desarrollar aplicaciones web con MVC5, se us la versin en espaol para el desarrollo

del presente curso. Para la ejecucin de los ejemplos se utiliz el explorador web Google Chrome.

La pgina oficial de Microsoft para MVC es: http://www.asp.net/mvc, all encontrar tutoriales, videos e

inclusive cdigo fuente de diversos ejemplos y aplicaciones comerciales.



1.1. El patrn Modelo-Vista-Controlador (MVC)

ASP.NET MVC es, bsicamente, una implementacin del patrn Modelo - Vista - Controlador (MVC) para

tecnologa ASP.NET. El patrn MVC no es ni nuevo (data de finales de los aos 70) no estaba pensado para

aplicaciones web, pero en realidad en aplicaciones web encaja perfectamente.

Este patrn no es exclusivo de ASP.NET, otros frameworks en PHP (Code Igniter, Sumfony) y Java (Spring,

Struts) tambin lo han desarrollado

Brevemente podemos decir que el patrn MVC separa la lgica (y acceso a datos) de una aplicacin de su

presentacin, usando 3 componentes: el Modelo, la Vista y el Controlador.

1.1.1. El Controlador

Acta de intermediario entre el usuario, el Modelo y la Vista, es el componente que gestiona todo flujo de

informacin. Recoge las peticiones del usuario, interaccionan con el Modelo para obtener datos y define que

vista es la que debe mostrar estos datos.

1.1.2. El Modelo

Toda la lgica, reglas de negocio y el acceso a datos representa el Modelo.

1.1.3. La Vista

Representan la presentacin de la aplicacin.

Las Vistas contienen, bsicamente, el cdigo que se enva al navegador, es decir el cdigo HTML (y cdigo

Java Script, siempre y cuando este cdigo haga cosas de presentacin, no de lgica de negocio, como las

validaciones en algunos formularios).



El flujo que sigue desde la peticin de informacin hasta su entrega queda establecido en 5 pasos, como se

muestra en la anterior. En resumen y a manera de ejemplo:

Paso 1

El Usuario solicita informacin a travs de una URL en el explorador web. Por ejemplo, solicitar los datos

del producto de cdigo 108: http://www.LaTienda.com/Ventas/VerProducto/108.

Paso 2

El mtodo VerProducto del Controlador Ventas se encarga de recibir dicha solicitud y solicita al Modelo

informacin del producto de cdigo 108.

Paso 3

El Modelo responde al mtodo VerProducto entregndole los datos del producto solicitado.

Paso 4

El mtodo VerProducto enva a la Vista los datos del producto solicitado.

Paso 5

La Vista (bsicamente un pgina HTML) recibe los datos del producto enviado por el mtodo VerProducto

(del Controlador Ventas) le da un formato adecuado y enva el archivo HTML renderizado al usuario para

que sea visualizado por su explorador web.

En el contexto del curso, el trmino renderizado hace referencia a un proceso de transformacin, esto es, procesa la Vista (archivo cshtml que contiene cdigo HTML y C#) y lo transforma a una pgina HTML que el navegador lo pueda interpretar.

1.2. Ejecutar Visual Studio

Para ejecutar Visual Studio seguimos uno de los siguientes pasos:

Presionamos las teclas Windows + R, en el campo Abrir del formulario ingresamos el texto devenv

y hacemos click en el botn Aceptar.

En la pantalla de inicio de Windows 8 buscamos Visual Studio y seleccionamos el cono de la

aplicacin.



1.3. Primera Aplicacin MVC: Hola Mundo

Veremos cmo se crea una aplicacin MVC en Visual Studio 2015, tambin explicaremos de manera prctica

cmo interacta el usuario con el Controlador, y ste con el Modelo y la Vista.

1.3.1. Crear un proyecto MVC

Iniciamos Visual Studio 2015 y seleccionamos la opcin:

Archivo > Nuevo > Proyecto



En la pantalla siguiente seleccionar las opciones tal cual se muestra y presionar el botn Aceptar.

En la pantalla siguiente seleccionar la plantilla MVC, como se va a crear una aplicacin sencilla presionar el

botn Cambiar autenticacin.



Seleccionar la opcin Sin autenticacin y presionar el botn Aceptar.

Presionar el botn Aceptar para crear el proyecto MVC.



Si se muestra la siguiente pantalla hacer click en el link No gracias, no volver a preguntarme.

Finalmente el proyecto ha sido creado.



1.3.2. Estructura de una aplicacin MVC5

La estructura (organizacin de archivos y carpetas) de una aplicacin MVC5 depende del tipo de

autenticacin que se elige al crear el proyecto, en la seccin anterior elegimos Sin autenticacin por lo que

la estructura se muestra en la siguiente figura.

Esta estructura lo vemos en la ventana Explorador de

soluciones.

Las carpetas principales son:

Controllers. Contiene todos los controladores, un controlador

corresponde a un archivo de tipo cs (HomeController.cs por

ejemplo).

Views. Contiene todas las vistas, un controlador puede tener

mltiples vistas, entonces, las vistas de un controlador estn

dentro de una carpeta que est asociado a su controlador. Las

vistas son archivos de tipo cshtml (Contact.cshtml por ejemplo).

Models. Contiene las clases que identifican a cada entidad de la

lgica del negocio, las clases son archivos de tipo cs (Producto.

cs por ejemplo).

Content. Contiene los archivos que definen el estilo y

maquetacin de las vistas, son archivos de tipo css (Site.css por

ejemplo).

Scripts. Contiene los archivos (librerias) javascrit o de algn

framework como Jquery, son archivos de tipo js (bootstrap.js

por ejemplo).

App_Data. Contiene los archivos que sirven de almacena-

miento de informacin, como bases de datos locales o

compactas.

1.3.3. Ejecutar la aplicacin

La forma ms rpida de ejecutar la aplicacin es presionando en el botn de la barra de

herramientas.

Cuando se ejecute se abrir el explorador web cuyo nombre se muestra en el botn. Para cambiar el

explorador web donde se ejecutar la aplicacin bastar con seleccionarlo de la lista que contiene el botn,

en la lista se mostrarn los exploradores web que tenemos instalado en Windows.



Tambin podemos ejecutar la aplicacin seleccionando la opcin:

Depurar > Iniciar depuracin

O presionando la tecla F5.

Si es la primera vez que ejecutamos la aplicacin se iniciar el servidor de aplicaciones IIS Express, este

servidor viene instalado conjuntamente con Visual Studio.

Una vez ejecutemos se ver la siguiente pgina web:

Es la misma pgina web si presionamos en el men Inicio o si presionamos en el link Nombre de aplicacin.

Visual Studio crea por defecto tres pginas que se pueden visualizar si presionamos en los mens Inicio,

Acerca de y Contacto. Podemos deducir que Visual Studio ha creado los controladores y vistas que responden

a las peticiones de cada men. En este caso el modelo no ha sufrido modificaciones.

Si presionamos en el men Acerca de se muestra:



Si presionamos en el men Contacto se muestra:

1.3.4. Asociacin entre una Peticin y el Controlador

Una peticin web que soporta MVC tiene generalmente la siguiente estructura:

http://www.alguncomercioelectronico.com/Productos/MostrarProductos/Zapatillas

Donde:

http://www.alguncomercioelectronico.com: Es el dominio de la aplicacin, cuando ejecutamos la aplicacin

en Visual Studio el dominio tiene la siguiente forma http://localhost:52287, el nmero del puerto puede

variar en cada ejecucin.

Productos: Es el controlador que recibe la peticin.

MostrarProductos: Es el mtodo del controlador Productos que responder la peticin.

Zapatillas: Identifica los parmetros que se envan al mtodo MostrarProductos().



Una peticin debe especificar qu mtodo del controlador debe responder a dicha peticin. Por lo que podemos deducir que una peticin no hace ms que ejecutar un mtodo de algn controlador.

Para el caso del ejemplo:

La peticin http://localhost:52287/Home/About lo responde el mtodo About() del controlador

HomeController.

La peticin http://localhost:52287/Home/Contact lo responde el mtodo Contact() del controlador

HomeController.

Un caso especial es la peticin http://localhost:52287, en esta peticin no se especifica el controlador ni el

mtodo que responder al mismo, sin embargo vemos en el explorador web una pgina web que resulta de

enviar esa peticin.

Es una convencin en ASP.NET MVC que cuando no se especifica el controlador, el controlador por defecto es HomeController, y que cuando no se especifica el mtodo, el mtodo por defecto es Index(). Esta caracterstica es configurable y lo revisaremos en un captulo posterior..



Por lo tanto, obtendramos la misma pgina si hacemos las siguientes peticiones:

http://localhost:52287

http://localhost:52287/Home

http://localhost:52287/Home/index

1.3.5. Ciclo bsico de una Peticin

Como lo vimos, la peticin: http://localhost:52287/Home/About lo responder el mtodo About() del

controlador HomeController.

En la peticin, el nombre del controlador no debe estar acompaado del sufijo Controller. La clase que identifica un controlador debe tener el sufijo Controller y debe heredar de la clase Controller. stas con convenciones de ASP.NET MVC



Si un mtodo va a responder una peticin y va a enviar una pgina web al usuario, el mtodo debe ser de tipo ActionResult. En adelante a este tipo de mtodos lo llamaremos simplemente como Actions.

Lo que hace el Action About() es dar un valor al atributo Message del objeto ViewBag e indicar la vista

(HTML) que enviar al usuario.

El ViewBag es un simple mtodo de transporte de datos/objetos entre el controlador y la vista. Los atributos del objeto ViewBag se pueden crear a medida de la necesidad de la aplicacin y su nombre sigue los criterios del nombre de una variable comn en C#.

Si no se especifica una vista explcitamente, la vista ser la que tiene el mismo nombre del Action del controlador.

En este caso, la vista que enviar el Action About() al usuario ser About.cshtml. Notar que este archivo se

encuentra dentro de la carpeta Home, es el mismo nombre del controlador del Action About().

El cdigo que est precedido del carcter @ o dentro del bloque @{} es cdigo que ser transformado a

cdigo HTML cuando MVC renderice la vista.

Cuando vemos esta vista (About.cshtml) en el explorador web, vemos que el HTML generado es solo una

parte de la pgina web completa, la que vemos en la seccin Contenido de la figura siguiente.



Y el cdigo HTML de las secciones Cabecera y Pie de pgina de dnde la obtiene MVC?

El cdigo HTML de esas secciones, MVC las obtiene de la vista _Layout.cshtml

Entonces, la pgina web completa, para este ejemplo, la componen las vistas About.cshtml y _Layout.cshtml,

lo mismo sucede con las vistas Index.cshtml y Contact.cshtml.

A la vista _Layout.cshtml se le conoce como Pgina Maestra.

MVC utiliza el concepto de Pginas Maestras para anidar una vista dentro de otra.



Podemos decir que una Pgina Maestra es una vista (archivo de tipo cshtml) que contiene las secciones

comunes de una pgina.

Este concepto permite que las pginas de una aplicacin tengan una estructura uniforme y que adems el

mantenimiento de las secciones comunes sea escalable y est centralizada.

Entonces, para este ejemplo, si quiero modificar el HTML de la seccin Contenido debo editar la vista

About.cshtml. Y si quiero modificar el HTML de las otras secciones debo editar la vista _Layout.cshtml.

En este ciclo bsico no se interactu con el Modelo, slo con el Controlador y la Vista. Este es un esquema

que se puede usar para crear un sitio web con pginas estticas.

1.3.6. Agregar Controladores

Para agregar un Controlador hacemos click derecho en la carpeta Controllers y seleccionamos la opcin:

Agregar > Controlador

En la pantalla siguiente seleccionamos la opcin Controlador de MVC5: en blanco y presionamos el botn

Agregar.



En el formulario que se muestra poner el nombre del controlador HolaMundoController.

Recordar que el nombre de un controlador debe tener el sufijo Controller.

Presionamos el botn Agregar.

Cuando se crear un controlador por defecto se crea el Action Index().

Ejecutamos la aplicacin y resolvemos /HolaMundo/Index o simplemente /HolaMundo, obtenemos:



Se muestra una pgina que indica que se obtuvo un error, esto debido a que no existe la vista Index.cshtml

dentro de la carpeta HolaMundo. Pasamos a crear una vista para el Action Index ().

1.3.7. Agregar Vistas

Para agregar una vista para el Action Index() hacemos click derecho en cualquier lnea de cdigo del Action y

seleccionamos la opcin Agregar vista

Dejar las opciones por defecto (como se muestra en la figura anterior) y presionar el botn Agregar.

Se crea la vista Index.cshtml dentro de la carpeta /Views/HolaMundo.

Si la vista que se crea va usar una Pgina Maestra debemos activar la opcin Usar pgina de diseo y no

ingresar ninguna pgina, tal como se muestra en la figura anterior.

Si es la primera vista que se crea para un controlador, MVC crear la carpeta que contendr todas las vistas

de dicho controlador.



Ejecutamos la aplicacin y resolvemos nuevamente /HolaMundo, obtenemos:

Vamos a modificar esta vista de acuerdo a:



Ejecutamos la aplicacin y resolvemos nuevamente /HolaMundo, obtenemos:

Vamos a crear un men para poder la nueva pgina desde la pgina principal de la aplicacin (/Home/Index).

Como las opciones de men son parte de la Pgina Maestra vamos a modificar la vista _Layaut.cshtml de

acuerdo a:

Slo se ha agregado la lnea 27.

La funcin Html.ActionLink() permite crear links (enlaces a otras pginas web), el primer parmetro es el

texto que se mostrar en el link, el segundo es el Action que responder la peticin y el tercer parmetro es

el Controlador. Por lo que el link resolver la siguiente peticin: /HolaMundo/Index.



Ejecutamos la aplicacin, observamos la nueva opcin de men (link).

Hacemos click en la nueva opcin de men y obtenemos:

Antes de realizar cualquier modificacin en nuestra aplicacin debemos de terminar la ejecucin en Visual Studio, esto no hace que se cierre el explorador web donde se ejecuta la aplicacin.

1.3.8. Terminar la ejecucin de la aplicacin

Para terminar la ejecucin debemos presionar el botn de la barra de herramientas.

Tambin podemos detener la ejecucin seleccionando la opcin:

Depurar > Detener depuracin

O presionando las teclas Mayus. + F5.



1.4. El concepto Responsive

Dependiendo del tamao de la ventana del explorador web una pgina web se visualiza de distinta manera,

si disminuimos el tamao horizontal de nuestra aplicacin la pgina principal tendr el siguiente aspecto:

Vemos que el men ya no se visualiza completamente, en cambio aparece un cono que al presionarlo hace

que se muestre el men como una lista desplegable.



As como el men, la estructura de toda la pgina sufre cambios de tal manera que la pgina sea fcil de

navegar y que su contenido se acomode de acuerdo al tamao del explorador web, esta caracterstica

responde a que las pginas han sido diseadas con lineamientos Responsive.

La mayor ventaja es que una pgina puede ser vista de una forma adecuada en distintos dispositivos como

PCs, laptops, tablets y smartphones.

En el caso de ASP.NET MVC5 el concepto Responsive se cristaliza con el uso de Bootstrap.

1.4.1. Bootstrap

Bootstrap es un conjunto de libreras (framework) implementa por el equipo de desarrollo de Twiter. La

siguiente pgina es un extracto de Bootstrap en Wikipedia:

http://es.wikipedia.org/wiki/Twitter_Bootstrap



1.5. IIS Express

Visual Studio 2015 incluye Internet Information Services Express, IIS Express es un servidor de aplicaciones

que hace posible la ejecucin de todas las aplicaciones MVC en alguno de los exploradores web que se tiene

instalado en el equipo de desarrollo.

Cuando se ejecuta por primera vez la aplicacin que se est desarrollando, IIS Express tambin inicia su

ejecucin. En la barra de tareas de Windows, se identifica a IIS Express con el cono que se muestra en la

figura siguiente.

IIS Express se ejecuta en un puerto de nmero aleatorio.

En el caso de la figura anterior, IIS Express se ejecuta en el puerto es 52287.

Cuando hablamos de peticiones como /Catalogo/MostrarProductos se supondr que se est resolviendo la URL http://localhost:52287/Catalogo/MostrarProductos. En las URLs, las maysculas y minsculas en los nombres de los Controladores, Mtodos o Parmetros son indistintos.



2. El Controlador

En este captulo se explica cmo los Controladores responden a las peticiones HTTP de los usuarios y cmo

devuelve informacin al navegador del usuario. Se centra en la funcin de los controladores y sus acciones.

Este captulo establece las bases para los siguientes captulos.

2.1. El Rol del Controlador

Los Controladores en el patrn MVC son responsables de responder a la peticin o solicitud del usuario, a

menudo procesando informacin en el Modelo y finalizando con el envo de dicha informacin al usuario en

un formato definido por una Vista (HTML). De esta forma, los controladores se ocupan del flujo de la

aplicacin, se trabaja con datos que obtiene de las peticiones del usuario y le proporciona informacin que

salen a la vista correspondiente.

Las peticiones del usuario se transmiten a travs de una URL, en MCV por lo general tienen esta forma:

http://Servidor/Catalogo/MostrarProductos

Servidor: Es el dominio del sitio web, por ejemplo www.amazon.com

Catalogo: Indica que el Controlador Catalogo responder la peticin.

MostrarProductos: Indica que el mtodo MostrarProductos() del Controlador invocado ser el

encargado de procesar la peticin.

Si existen elementos adicionales posteriores a MostrarProductos (mtodo) son los parmetros de entrada

para dicha funcin, por ejemplo http://Servidor/Catalogo/MostrarProductos/Zapatillas

2.2. Agregar un Controlador

A diferencia del ejemplo introductorio, vamos agregar un controlador y modificaremos su contenido para

observar algo interesante.

Seguimos los pasos conocidos para crear un controlador y le damos el nombre CatalogoController

Obtenemos:



Modificamos el Action Index() de acuerdo a:

public String Index() { return "Interesante"; }

Ejecutamos y resolvemos /Catalogo

Se observa que la pgina no tiene un estilo ni contenido como los anteriores.

Si examinamos con detalle el cdigo del mtodo Index(), ste devuelve slo una cadena de caracteres

(String) y una vista (ActionResult). Comprobaremos esto revisando el cdigo fuente de la pgina en el

explorador web, para ello hacemos:



Obtenemos:

Nuevamente modificamos el Action Index() de acuerdo a:

public String Index() { string strMensaje1 = "Murcilago"; string strMensaje2 = HttpUtility.HtmlEncode("Murcilago"); return strMensaje1 + strMensaje2; }

Ejecutamos y resolvemos /Catalogo



Se observa que cada mensaje es tratado de distinta forma por el explorador web. El cdigo fuente de esta

pgina es:

La funcin HttpUtility.HtmlEncode() codifica todos los caracteres especiales y luego los enva al explorador

web del usuario, la ventaja es que se muestra lo que realmente estamos enviando. Es muy recomendable

usar la funcin HttpUtility.HtmlEncode() cuando se desconoce el texto que se va a enviar al explorador web,

con esto evitamos muchos errores.

2.3. Parmetros en los Actions

Vamos agregar una funcionalidad dinmica, en el Controlador Catalogo agregamos el Action

MostrarProductos(), haremos que reciba y devuelva el parmetro que se enva en el query string, que es la

relacin de parmetros que acompaan en la URL al Controlador y al Action.

// GET: /Catalogo/MostrarProductos?pCategoria=Zapatillas public string MostrarProductos(string pCategoria) { string strMensaje = HttpUtility.HtmlEncode("Categora = " + pCategoria); return strMensaje; }

Ejecutamos y resolvemos: /Catalogo/MostrarProductos?pCategoria=Polos

Si cambiamos el valor del parmetro, el nuevo valor se refleja en la pgina web.



El nombre del parmetro que se enva en el query string debe ser el mismo que se indica en el Action para que se reconozca automticamente. En el Action los parmetros deben ser de tipo string.

Es posible incluir ms de un parmetro, para mostrar esto modificamos nuevamente el mismo Action:

// GET: /Catalogo/MostrarProductos?pCategoria=Zapatillas&pSubCategoria=Mujer public string MostrarProductos(string pCategoria, string pSubCategoria) { string strMensaje = HttpUtility.HtmlEncode("Categora = " + pCategoria + " - SubCategora = " + pSubCategoria); return strMensaje; }

Ejecutamos y resolvemos: /Catalogo/MostrarProductos?pCategoria=Zapatillas&pSubCategoria=Mujer

Se obtiene el mismo resultado si alteramos el orden de los parmetros, es decir, si resolvemos:

/Catalogo/MostrarProductos?pSubCategoria=Mujer&pCategoria=Zapatillas

Hemos visto el envo de parmetros a travs del query string, ahora veremos una forma alternativa de

enviar parmetros.

Agregamos el Action DetalleProducto() de acuerdo a:

// GET: /Catalogo/DetalleProducto/123 public string DetalleProducto(int id) { string strMensaje = HttpUtility.HtmlEncode("ID producto = " + id); return strMensaje; }

Ejecutamos y resolvemos: /Catalogo/ DetalleProducto /123, obtenemos:



El nombre del parmetro que se indica en el Action DetalleProducto() debe ser id (o una de stas ID, iD,

Id) para que el mtodo lo reconozca automticamente. En el Action este parmetro debe ser de tipo int.



3. La Vista

De acuerdo al modelo MVC, el Controlador la pasa a la Vista la informacin (que el Modelo ha procesado)

para que lo convierta a un formato adecuado y de esta forma lo presente al Usuario.

3.1. El propsito de las Vistas

La Vista es el responsable de proporcionar la interfaz de usuario (GUI) que consta fundamentalmente de

cdigo HTML. Aunque esto es lo ms comn al desarrollar aplicaciones web, existen casos donde las Vistas

pueden tener un contenido de distinto tipo.

3.2. Asociacin entre los Actions y las Vistas

Muy a menudo un Action est asociado a una Vista.

Cuando se crea un nuevo Controlador Visual Studio no crea automticamente las Vistas ya que antes debe

definirse los Action del mismo. Este nuevo Controlador, como vimos en el captulo introductorio, es una

clase y se guarda en un archivo .cs dentro de la carpeta Controllers.

Al momento de crear una Vista para un Action de un Controlador nuevo, automticamente:

Dentro de la carpeta Views se crea una carpeta con el nombre del Action pero sin el sufijo

Controller.

Dentro de la nueva carpeta se crea un archivo de tipo .cshtml con el mismo nombre del Action sin el

sufijo Controller.

Las Vistas que se crearn para nuevos Action del mismo Controlador se ubicarn en la misma carpeta.

En la figura siguiente se muestra la asociacin entre los Action del Controlador Home y sus correspondientes

Vistas.



Si no se especifica explcitamente la Vista que usar el Action para mostrar informacin, MVC har que use

la Vista (archivo .cshtml) que tiene el mismo nombre del Action.

Notar en la figura anterior que no existen Vistas para el Controlador Catalogo.

3.3. Agregar una Vista

Siguiendo el ejemplo del captulo anterior vamos agregar una vista, pero en este caso no vamos a indicar el

Action que lo enviar.

Hacemos click derecho en la carpeta /Views/Catalogo y seleccionamos la opcin Agregar > Vista

El nombre de la Vista ser Ofertas, dejar las dems opciones como se muestra en la siguiente figura:

Presionar en el botn Agregar.

Visual Studio crear el archivo Ofertas.cshtml dentro de la carpeta /Views/Catalogo



En el Controlador Catalogo vamos a crear el Action Promociones(), es cual enviar la Vista que acabamos de

crear.

// GET: /Catalogo/Promociones public ActionResult Promociones() { return View("Ofertas"); }

Ejecutamos la aplicacin y resolvemos /Catalogo/Promociones

Es posible entonces especificar una vista distinta y con un nombre diferente al del Action.

3.4. Enviar informacin del Controlador a la Vista

En el captulo introductorio se utiliz la propiedad ViewBag para enviar informacin del Controlador a la

Vista, ahora vamos a revisar a detalle este tema y adems se incluir otra forma de pasar datos (variables u

objetos).

Vamos a crear en el Modelo dos Entidades: Empleado y Local. Nos ayudarn a entender las formas de enviar

informacin desde el Controlador a la Vista.



3.4.1. Agregar Modelos

Para agregar la Entidad Empleado al Modelo hacer click derecho en la carpeta Models y seleccionar la opcin

Agregar > Clase

Ingresar el nombre Empleado.cs

Presionar en el botn Agregar. Se crea el archivo Empleado.cs dentro de la carpeta Models



Agregamos atributos a la Entidad (clase) Empleado de acuerdo a:

public class Empleado { public int IdEmpleado { get; set; } public string Nombres { get; set; } public string Apellidos { get; set; } }

Cada vez que se haga alguna modificacin en el Modelo (agregar, cambiar, eliminar Entidades o alguno de sus atributos) se debe compilar la aplicacin para los cambios sean reconocidos como tal.

Compilamos la aplicacin. Seleccionamos la opcin Compilar > Compilar Solucin

De no existir errores obtenemos lo siguiente en la consola de salida:

Del mismo modo creamos la Entidad Local, y agregamos sus atributos de acuerdo a:

public class Local { public int IdLocal { get; set; } public string Direccion { get; set; } public int Capacidad { get; set; } }

Compilamos la aplicacin.



3.4.2. ViewBag

Para mostrar con un ejemplo cmo se va pasar informacin desde el Controlador a la Vista crear el

Controlador Tienda con dos Actions: Empleados() y Locales().

Antes de usar el Modelo en los Controladores debemos hacer agregar una sentencia using en cada

Controlador que va hacer referencia a las Entidades del Modelo.

Modificamos el Action Empleados de acuerdo a:

// GET: Tienda/Empleados public ActionResult Empleados() { var empleado_1 = new Empleado {IdEmpleado = 1, Nombres = "Juan", Apellidos = "Prez"}; var empleado_2 = new Empleado {IdEmpleado = 2, Nombres = "Mara", Apellidos = "Prinz"}; ViewBag.Empleado1 = empleado_1; ViewBag.Empleado2 = empleado_2; ViewBag.FechaHora = DateTime.Now; return View(); }



Creamos la Vista para el Action Empleados()

Modificamos la Vista Empleados.cshtml de acuerdo a:

@{ ViewBag.Title = "Empleados"; } Empleado @ViewBag.Empleado1.IdEmpleado Nombres: @ViewBag.Empleado1.Nombres Apellidos: @ViewBag.Empleado1.Apellidos Empleado @ViewBag.Empleado2.IdEmpleado Nombres: @ViewBag.Empleado2.Nombres Apellidos: @ViewBag.Empleado2.Apellidos @ViewBag.FechaHora



Ejecutamos y resolvemos /Tienda/Empleados

ViewBag es una propiedad que se usa para pasar informacin del Controlador a la Vista, esta propiedad es

reconocida automticamente por los Controladores y las Vistas.

Los atributos de ViewBag son creados a demanda del desarrollador, para el caso del ejercicio los atributos

son Empleado1, Empleado2 y FechaHora

3.4.3. Usando el Modelo para pasar objetos a la Vista

Con otro ejercicio se mostrar esta caracterstica.

Modificamos el Action Locales() del Controlador Tienda de acuerdo a:

// GET: Tienda/Locales public ActionResult Locales() { var local_1 = new Local { IdLocal = 12, Direccion = "Av. Brasil 1789", Capacidad = 98 }; return View(local_1); }

Se debe notar que el objeto local_1 se enva como argumento del mtodo View().

Vamos a crear la Vista para este Action



Para usar esta caracterstica la Vista debe ser creada de la siguiente manera:

En el campo Plantilla seleccionamos Empty y en Clase de modelo seleccionamos la clase Local de nuestro

Modelo.

Presionamos agregar y se crea la Vista Locales.cshtml

Modificamos esta vista de acuerdo a:

@model HolaMundoMVC.Models.Local @{ ViewBag.Title = "Locales"; } Local @Model.IdLocal Direccin: @Model.Direccion Capacidad: @Model.Capacidad

La primera lnea indica que el Controlador est enviando un objeto de clase Local (que pertenece al Modelo).

@Model identifica al objeto que se recibe y podemos ahora usar sus atributos.



Se debe notar que cuando editamos el cdigo podemos obtener el efecto Intellisense al trabajar con el

objeto.

Contenido1. Introduccin1.1. El patrn Modelo-Vista-Controlador (MVC)1.1.1. El Controlador1.1.2. El Modelo1.1.3. La Vista

1.2. Ejecutar Visual Studio1.3. Primera Aplicacin MVC: Hola Mundo1.3.1. Crear un proyecto MVC1.3.2. Estructura de una aplicacin MVC51.3.3. Ejecutar la aplicacin1.3.4. Asociacin entre una Peticin y el Controlador1.3.5. Ciclo bsico de una Peticin1.3.6. Agregar Controladores1.3.7. Agregar Vistas1.3.8. Terminar la ejecucin de la aplicacin

1.4. El concepto Responsive1.4.1. Bootstrap

1.5. IIS Express

2. El Controlador2.1. El Rol del Controlador2.2. Agregar un Controlador2.3. Parmetros en los Actions

3. La Vista3.1. El propsito de las Vistas3.2. Asociacin entre los Actions y las Vistas3.3. Agregar una Vista3.4. Enviar informacin del Controlador a la Vista3.4.1. Agregar Modelos3.4.2. ViewBag3.4.3. Usando el Modelo para pasar objetos a la Vista

Documents

gdfg