GDFG

Aplicaciones Web
con
ASP.NET MVC 5
Guía del Curso
Docente: Carlos Alberto Mauricio Montes

Email: carlos_pucp@hotmail.com
Visual Studio 2015 – Aplicaciones Web con ASP.NET MVC 5 Guía del Curso Junio 2015
Contenido
Contenido ................................................................................................................................................... 2
1. Introducción ........................................................................................................................................ 3
1.1. El patrón 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 Aplicación MVC: Hola Mundo ......................................................................................... 6
1.3.1. Crear un proyecto MVC ........................................................................................................ 6
1.3.2. Estructura de una aplicación MVC5 .................................................................................... 10
1.3.3. Ejecutar la aplicación.......................................................................................................... 10
1.3.4. Asociación entre una Petición y el Controlador.................................................................. 12
1.3.5. Ciclo básico de una Petición ............................................................................................... 14
1.3.6. Agregar Controladores ....................................................................................................... 17
1.3.7. Agregar Vistas .................................................................................................................... 19
1.3.8. Terminar la ejecución de la aplicación................................................................................ 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. Parámetros en los Actions ......................................................................................................... 29
3. La Vista .............................................................................................................................................. 32
3.1. El propósito de las Vistas ........................................................................................................... 32
3.2. Asociación entre los Actions y las Vistas .................................................................................... 32
3.3. Agregar una Vista....................................................................................................................... 33
3.4. Enviar información 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
Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 2

1. Introducción
El presente material está orientado a la enseñanza 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 capítulos
posteriores.
El objetivo principal es mostrarle, con ejercicios prácticos, los fundamentos de los temas que se indican a
continuación, usted posteriormente podrá profundizar aún más cada uno de los mismos:
 MVC 5.0
 Entity Framework
 C#
 Bootstrap
También se revisará indirectamente HTML, Javascritp y Hojas de Estilo CSS. Antes de comenzar con el curso
recomiendo que revise HTML, ya que es más que necesario su dominio a nivel intermedio.
Los conceptos teóricos serán desarrollados en la práctica con la implementación de una funcionalidad
bastante conocida en sistemas informáticos “Mantenimiento de Entidades” que generalmente son parte del
módulo de Administración. Esta funcionalidad es también 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 versión en español para el desarrollo
del presente curso. Para la ejecución de los ejemplos se utilizó el explorador web Google Chrome.
La página oficial de Microsoft para MVC es: http://www.asp.net/mvc, allí encontrará tutoriales, videos e
inclusive código fuente de diversos ejemplos y aplicaciones comerciales.

1.1. El patrón Modelo-Vista-Controlador (MVC)

ASP.NET MVC es, básicamente, una implementación del patrón Modelo - Vista - Controlador (MVC) para
tecnología ASP.NET. El patrón MVC no es ni nuevo (data de finales de los años 70) no estaba pensado para
aplicaciones web, pero en realidad en aplicaciones web encaja perfectamente.
Este patrón no es exclusivo de ASP.NET, otros frameworks en PHP (Code Igniter, Sumfony) y Java (Spring,
Struts) también lo han desarrollado
Brevemente podemos decir que el patrón MVC separa la lógica (y acceso a datos) de una aplicación de su
presentación, usando 3 componentes: el Modelo, la Vista y el Controlador.
1.1.1. El Controlador
Actúa de intermediario entre el usuario, el Modelo y la Vista, es el componente que gestiona todo flujo de
información. 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 lógica, reglas de negocio y el acceso a datos representa el Modelo.
1.1.3. La Vista
Representan la presentación de la aplicación.
Las Vistas contienen, básicamente, el código que se envía al navegador, es decir el código HTML (y código
Java Script, siempre y cuando este código haga cosas de presentación, no de lógica de negocio, como las
validaciones en algunos formularios).

El flujo que sigue desde la petición de información 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 información a través de una URL en el explorador web. Por ejemplo, solicitar los datos
del producto de código 108: http://www.LaTienda.com/Ventas/VerProducto/108.
Paso 2
El método VerProducto del Controlador Ventas se encarga de recibir dicha solicitud y solicita al Modelo
información del producto de código 108.
Paso 3
El Modelo responde al método VerProducto entregándole los datos del producto solicitado.
Paso 4
El método VerProducto envía a la Vista los datos del producto solicitado.
Paso 5
La Vista (básicamente un página HTML) recibe los datos del producto enviado por el método VerProducto
(del Controlador Ventas) le da un formato adecuado y envía el archivo HTML “renderizado” al usuario para
que sea visualizado por su explorador web.
En el contexto del curso, el término renderizado hace referencia a un proceso de

transformación, esto es, procesa la Vista (archivo cshtml que contiene código HTML y C#) y lo
transforma a una página 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 botón Aceptar.
 En la pantalla de inicio de Windows 8 buscamos Visual Studio y seleccionamos el ícono de la

aplicación.

1.3. Primera Aplicación MVC: Hola Mundo

Veremos cómo se crea una aplicación MVC en Visual Studio 2015, también explicaremos de manera práctica
cómo interactúa 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 opción:
Archivo > Nuevo > Proyecto…

En la pantalla siguiente seleccionar las opciones tal cual se muestra y presionar el botón Aceptar.
En la pantalla siguiente seleccionar la plantilla MVC, como se va a crear una aplicación sencilla presionar el
botón Cambiar autenticación.

Seleccionar la opción Sin autenticación y presionar el botón Aceptar.
Presionar el botón 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 aplicación MVC5
La estructura (organización de archivos y carpetas) de una aplicación MVC5 depende del tipo de
autenticación que se elige al crear el proyecto, en la sección anterior elegimos Sin autenticación 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
múltiples vistas, entonces, las vistas de un controlador están
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

lógica del negocio, las clases son archivos de tipo cs (Producto.
cs por ejemplo).
Content. Contiene los archivos que definen el estilo y

maquetación de las vistas, son archivos de tipo css (Site.css por
ejemplo).
Scripts. Contiene los archivos (librerias) javascrit o de algún

framework como Jquery, son archivos de tipo js (bootstrap.js
por ejemplo).
App_Data. Contiene los archivos que sirven de almacena-

miento de información, como bases de datos locales o
compactas.
1.3.3. Ejecutar la aplicación
La forma más rápida de ejecutar la aplicación es presionando en el botón de la barra de

herramientas.
Cuando se ejecute se abrirá el explorador web cuyo nombre se muestra en el botón. Para cambiar el
explorador web donde se ejecutará la aplicación bastará con seleccionarlo de la lista que contiene el botón,
en la lista se mostrarán los exploradores web que tenemos instalado en Windows.

También podemos ejecutar la aplicación seleccionando la opción:
Depurar > Iniciar depuración
O presionando la tecla F5.
Si es la primera vez que ejecutamos la aplicación se iniciará el servidor de aplicaciones IIS Express, este
servidor viene instalado conjuntamente con Visual Studio.
Una vez ejecutemos se verá la siguiente página web:
Es la misma página web si presionamos en el menú Inicio o si presionamos en el link Nombre de aplicación.
Visual Studio crea por defecto tres páginas que se pueden visualizar si presionamos en los menús 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. Asociación entre una Petición y el Controlador
Una petición 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 aplicación, cuando ejecutamos la aplicación

en Visual Studio el dominio tiene la siguiente forma http://localhost:52287, el número del puerto puede
variar en cada ejecución.
Productos: Es el controlador que recibe la petición.
MostrarProductos: Es el método del controlador Productos que responderá la petición.
Zapatillas: Identifica los parámetros que se envían al método MostrarProductos().

Una petición debe especificar qué método del controlador debe responder a dicha petición.
Por lo que podemos deducir que una petición no hace más que ejecutar un método de algún
controlador.
Para el caso del ejemplo:
La petición http://localhost:52287/Home/About lo responde el método About() del controlador

HomeController.
La petición http://localhost:52287/Home/Contact lo responde el método Contact() del controlador
HomeController.
Un caso especial es la petición http://localhost:52287, en esta petición no se especifica el controlador ni el

método que responderá al mismo, sin embargo vemos en el explorador web una página web que resulta de
enviar esa petición.
Es una convención en ASP.NET MVC que cuando no se especifica el controlador, el controlador

por defecto es HomeController, y que cuando no se especifica el método, el método por defecto
es Index(). Esta característica es configurable y lo revisaremos en un capítulo posterior..

Por lo tanto, obtendríamos la misma página si hacemos las siguientes peticiones:
http://localhost:52287
http://localhost:52287/Home
http://localhost:52287/Home/index
1.3.5. Ciclo básico de una Petición
Como lo vimos, la petición: http://localhost:52287/Home/About lo responderá el método About() del

controlador HomeController.
En la petición, el nombre del controlador no debe estar acompañado 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 método va a responder una petición y va a enviar una página web al usuario, el método
debe ser de tipo ActionResult. En adelante a este tipo de métodos 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 método 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 aplicación y su
nombre sigue los criterios del nombre de una variable común en C#.
Si no se especifica una vista explícitamente, 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 código que está precedido del carácter @ o dentro del bloque @{…} es código que será transformado a
código 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 página web completa, la que vemos en la sección Contenido de la figura siguiente.

¿Y el código HTML de las secciones Cabecera y Pie de página de dónde la obtiene MVC?
El código HTML de esas secciones, MVC las obtiene de la vista _Layout.cshtml
Entonces, la página 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 Página Maestra.
MVC utiliza el concepto de Páginas Maestras para anidar una vista dentro de otra.

Podemos decir que una Página Maestra es una vista (archivo de tipo cshtml) que contiene las secciones
comunes de una página.
Este concepto permite que las páginas de una aplicación tengan una estructura uniforme y que además el
mantenimiento de las secciones comunes sea escalable y esté centralizada.
Entonces, para este ejemplo, si quiero modificar el HTML de la sección 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 básico no se interactuó con el Modelo, sólo con el Controlador y la Vista. Este es un esquema
que se puede usar para crear un sitio web con páginas estáticas.
1.3.6. Agregar Controladores
Para agregar un Controlador hacemos click derecho en la carpeta Controllers y seleccionamos la opción:
Agregar > Controlador…
En la pantalla siguiente seleccionamos la opción Controlador de MVC5: en blanco y presionamos el botón

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 botón Agregar.
Cuando se crear un controlador por defecto se crea el Action Index().
Ejecutamos la aplicación y resolvemos /HolaMundo/Index o simplemente /HolaMundo, obtenemos:

Se muestra una página 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 línea de código del Action y
seleccionamos la opción Agregar vista…
Dejar las opciones por defecto (como se muestra en la figura anterior) y presionar el botón Agregar.
Se crea la vista Index.cshtml dentro de la carpeta /Views/HolaMundo.

Si la vista que se crea va usar una Página Maestra debemos activar la opción Usar página de diseño y no
ingresar ninguna página, 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 aplicación y resolvemos nuevamente /HolaMundo, obtenemos:
Vamos a modificar esta vista de acuerdo a:

Ejecutamos la aplicación y resolvemos nuevamente /HolaMundo, obtenemos:
Vamos a crear un menú para poder la nueva página desde la página principal de la aplicación (/Home/Index).
Como las opciones de menú son parte de la Página Maestra vamos a modificar la vista _Layaut.cshtml de
acuerdo a:
Sólo se ha agregado la línea 27.

La función Html.ActionLink() permite crear links (enlaces a otras páginas web), el primer parámetro es el
texto que se mostrará en el link, el segundo es el Action que responderá la petición y el tercer parámetro es
el Controlador. Por lo que el link resolverá la siguiente petición: /HolaMundo/Index.

Ejecutamos la aplicación, observamos la nueva opción de menú (link).
Hacemos click en la nueva opción de menú y obtenemos:
Antes de realizar cualquier modificación en nuestra aplicación debemos de terminar la

ejecución en Visual Studio, esto no hace que se cierre el explorador web donde se ejecuta la
aplicación.
1.3.8. Terminar la ejecución de la aplicación
Para terminar la ejecución debemos presionar el botón de la barra de herramientas.
También podemos detener la ejecución seleccionando la opción:
Depurar > Detener depuración
O presionando las teclas Mayus. + F5.

1.4. El concepto Responsive

Dependiendo del tamaño de la ventana del explorador web una página web se visualiza de distinta manera,
si disminuimos el tamaño horizontal de nuestra aplicación la página 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 página sufre cambios de tal manera que la página sea fácil de
navegar y que su contenido se acomode de acuerdo al tamaño del explorador web, esta característica
responde a que las páginas han sido diseñadas con lineamientos Responsive.
La mayor ventaja es que una página 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 librerías (framework) implementa por el equipo de desarrollo de Twiter. La

siguiente página 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 ejecución 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 aplicación que se está desarrollando, IIS Express también inicia su
ejecución. 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 número 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 mayúsculas y minúsculas en los nombres de los Controladores, Métodos o
Parámetros son indistintos.

2. El Controlador
En este capítulo se explica cómo los Controladores responden a las peticiones HTTP de los usuarios y cómo
devuelve información al navegador del usuario. Se centra en la función de los controladores y sus acciones.
Este capítulo establece las bases para los siguientes capítulos.
2.1. El Rol del Controlador

Los Controladores en el patrón MVC son responsables de responder a la petición o solicitud del usuario, a
menudo procesando información en el Modelo y finalizando con el envío de dicha información al usuario en
un formato definido por una Vista (HTML). De esta forma, los controladores se ocupan del flujo de la
aplicación, se trabaja con datos que obtiene de las peticiones del usuario y le proporciona información que
salen a la vista correspondiente.
Las peticiones del usuario se transmiten a través 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 petición.
 MostrarProductos: Indica que el método MostrarProductos() del Controlador invocado será el
encargado de procesar la petición.
Si existen elementos adicionales posteriores a MostrarProductos (método) son los parámetros de entrada
para dicha función, 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 página no tiene un estilo ni contenido como los anteriores.
Si examinamos con detalle el código del método Index(), éste devuelve sólo una cadena de caracteres
(String) y una vista (ActionResult). Comprobaremos esto revisando el código fuente de la página en el
explorador web, para ello hacemos:

Obtenemos:
Nuevamente modificamos el Action Index() de acuerdo a:
public String Index()

{
string strMensaje1 = "<h1>Murciélago</h1><br/>";
string strMensaje2 = HttpUtility.HtmlEncode("<h1>Murciélago</h1>");
return strMensaje1 + strMensaje2;
}
Ejecutamos y resolvemos /Catalogo

Se observa que cada mensaje es tratado de distinta forma por el explorador web. El código fuente de esta
página es:
La función HttpUtility.HtmlEncode() codifica todos los caracteres especiales y luego los envía al explorador
web del usuario, la ventaja es que se muestra lo que realmente estamos enviando. Es muy recomendable
usar la función HttpUtility.HtmlEncode() cuando se desconoce el texto que se va a enviar al explorador web,
con esto evitamos muchos errores.
2.3. Parámetros en los Actions

Vamos agregar una funcionalidad dinámica, en el Controlador Catalogo agregamos el Action
MostrarProductos(), haremos que reciba y devuelva el parámetro que se envía en el query string, que es la
relación de parámetros que acompañan en la URL al Controlador y al Action.
// GET: /Catalogo/MostrarProductos?pCategoria=Zapatillas
public string MostrarProductos(string pCategoria)

{
string strMensaje = HttpUtility.HtmlEncode("Categoría = " + pCategoria);
return strMensaje;
}
Ejecutamos y resolvemos: /Catalogo/MostrarProductos?pCategoria=Polos
Si cambiamos el valor del parámetro, el nuevo valor se refleja en la página web.

El nombre del parámetro que se envía en el query string debe ser el mismo que se indica en el
Action para que se reconozca automáticamente. En el Action los parámetros deben ser de tipo
string.
Es posible incluir más de un parámetro, 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("Categoría = " + pCategoria + " -
SubCategoría = " + pSubCategoria);
return strMensaje;
}
Ejecutamos y resolvemos: /Catalogo/MostrarProductos?pCategoria=Zapatillas&pSubCategoria=Mujer
Se obtiene el mismo resultado si alteramos el orden de los parámetros, es decir, si resolvemos:

/Catalogo/MostrarProductos?pSubCategoria=Mujer&pCategoria=Zapatillas
Hemos visto el envío de parámetros a través del query string, ahora veremos una forma alternativa de
enviar parámetros.
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 parámetro que se indica en el Action DetalleProducto() debe ser “id” (o una de éstas ID, iD,
Id) para que el método lo reconozca automáticamente. En el Action este parámetro debe ser de tipo int.

3. La Vista
De acuerdo al modelo MVC, el Controlador la pasa a la Vista la información (que el Modelo ha procesado)
para que lo convierta a un formato adecuado y de esta forma lo presente al Usuario.
3.1. El propósito de las Vistas

La Vista es el responsable de proporcionar la interfaz de usuario (GUI) que consta fundamentalmente de
código HTML. Aunque esto es lo más común al desarrollar aplicaciones web, existen casos donde las Vistas
pueden tener un contenido de distinto tipo.
3.2. Asociación 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 automáticamente las Vistas ya que antes debe
definirse los Action del mismo. Este nuevo Controlador, como vimos en el capítulo 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, automáticamente:
 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 crearán para nuevos Action del mismo Controlador se ubicarán en la misma carpeta.
En la figura siguiente se muestra la asociación entre los Action del Controlador Home y sus correspondientes
Vistas.

Si no se especifica explícitamente la Vista que usará el Action para mostrar información, 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 capítulo 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 opción Agregar > Vista…
El nombre de la Vista será Ofertas, dejar las demás opciones como se muestra en la siguiente figura:
Presionar en el botón 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 aplicación y resolvemos /Catalogo/Promociones
Es posible entonces especificar una vista distinta y con un nombre diferente al del Action.
3.4. Enviar información del Controlador a la Vista

En el capítulo introductorio se utilizó la propiedad ViewBag para enviar información del Controlador a la
Vista, ahora vamos a revisar a detalle este tema y además se incluirá otra forma de pasar datos (variables u
objetos).
Vamos a crear en el Modelo dos Entidades: Empleado y Local. Nos ayudarán a entender las formas de enviar
información 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 opción
Agregar > Clase…
Ingresar el nombre Empleado.cs
Presionar en el botón 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 modificación en el Modelo (agregar, cambiar, eliminar Entidades
o alguno de sus atributos) se debe compilar la aplicación para los cambios sean reconocidos
como tal.
Compilamos la aplicación. Seleccionamos la opción Compilar > Compilar Solución
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 aplicación.

3.4.2. ViewBag
Para mostrar con un ejemplo cómo se va pasar información 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 =
"Pérez"};
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";
}
<h2>Empleado @ViewBag.Empleado1.IdEmpleado</h2>
Nombres: <strong>@ViewBag.Empleado1.Nombres</strong><br />
Apellidos: <strong>@ViewBag.Empleado1.Apellidos</strong>
<h2>Empleado @ViewBag.Empleado2.IdEmpleado</h2>
Nombres: <strong>@ViewBag.Empleado2.Nombres</strong><br />
Apellidos: <strong>@ViewBag.Empleado2.Apellidos</strong>
<h3>@ViewBag.FechaHora</h3>

Ejecutamos y resolvemos /Tienda/Empleados
ViewBag es una propiedad que se usa para pasar información del Controlador a la Vista, esta propiedad es
reconocida automáticamente 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 característica.
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 envía como argumento del método View().
Vamos a crear la Vista para este Action

Para usar esta característica 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";
}
<h2>Local @Model.IdLocal</h2>
Dirección: <strong>@Model.Direccion</strong><br />
Capacidad: <strong>@Model.Capacidad</strong>
La primera línea 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 código podemos obtener el efecto Intellisense al trabajar con el
objeto.

GDFG

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

GDFG

Загружено:

Авторское право:

Доступные форматы

Aplicaciones Web

Guía del Curso

Docente: Carlos Alberto Mauricio Montes

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 2

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 3

1.1. El patrón Modelo-Vista-Controlador (MVC)

Toda la lógica, reglas de negocio y el acceso a datos representa el Modelo.

Representan la presentación de la aplicación.

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 4

El método VerProducto envía a la Vista los datos del producto solicitado.

En el contexto del curso, el término renderizado hace referencia a un proceso de

1.2. Ejecutar Visual Studio

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

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 5

1.3. Primera Aplicación MVC: Hola Mundo

1.3.1. Crear un proyecto MVC

Iniciamos Visual Studio 2015 y seleccionamos la opción:

Archivo > Nuevo > Proyecto…

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 6

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 7

Seleccionar la opción Sin autenticación y presionar el botón Aceptar.

Presionar el botón Aceptar para crear el proyecto MVC.

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 8

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

Finalmente el proyecto ha sido creado.

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 9

1.3.2. Estructura de una aplicación MVC5

Esta estructura lo vemos en la ventana Explorador de

Las carpetas principales son:

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

Content. Contiene los archivos que definen el estilo y

Scripts. Contiene los archivos (librerias) javascrit o de algún

App_Data. Contiene los archivos que sirven de almacena-

1.3.3. Ejecutar la aplicación

La forma más rápida de ejecutar la aplicación es presionando en el botón de la barra de

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 10

También podemos ejecutar la aplicación seleccionando la opción:

Depurar > Iniciar depuración

O presionando la tecla F5.

Una vez ejecutemos se verá la siguiente página web:

Si presionamos en el menú Acerca de se muestra:

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 11

Si presionamos en el menú Contacto se muestra:

1.3.4. Asociación entre una Petición y el Controlador

http://www.alguncomercioelectronico.com: Es el dominio de la aplicación, cuando ejecutamos la aplicación

Productos: Es el controlador que recibe la petición.

MostrarProductos: Es el método del controlador Productos que responderá la petición.

Zapatillas: Identifica los parámetros que se envían al método MostrarProductos().

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 12

Para el caso del ejemplo:

La petición http://localhost:52287/Home/About lo responde el método About() del controlador

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

Es una convención en ASP.NET MVC que cuando no se especifica el controlador, el controlador

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 13

Por lo tanto, obtendríamos la misma página si hacemos las siguientes peticiones:

1.3.5. Ciclo básico de una Petición

Como lo vimos, la petición: http://localhost:52287/Home/About lo responderá el método About() del

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 14

El ViewBag es un simple método de transporte de datos/objetos entre el controlador y la vista.

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 15

A la vista _Layout.cshtml se le conoce como Página Maestra.

Docente: Carlos Alberto Mauricio Montes Email: carlos_pucp@hotmail.com 16

1.3.6. Agregar Controladores