Graphic Art y dgdg">
GDFG
GDFG
GDFG
con
ASP.NET MVC 5
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
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.
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
1.1.3. La Vista
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
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.
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 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.
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.
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.
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.
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.
Una petición web que soporta MVC tiene generalmente la siguiente estructura:
http://www.alguncomercioelectronico.com/Productos/MostrarProductos/Zapatillas
Donde:
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.
http://localhost:52287
http://localhost:52287/Home
http://localhost:52287/Home/index
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.
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.
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.
Para agregar un Controlador hacemos click derecho en la carpeta Controllers y seleccionamos la opción:
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 ().
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.
Si es la primera vista que se crea para un controlador, MVC creará la carpeta que contendrá todas las vistas
de dicho controlador.
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:
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.
1.4.1. Bootstrap
http://es.wikipedia.org/wiki/Twitter_Bootstrap
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.
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.
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
Seguimos los pasos conocidos para crear un controlador y le damos el nombre CatalogoController
Obtenemos:
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:
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.
// GET: /Catalogo/MostrarProductos?pCategoria=Zapatillas
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;
}
Hemos visto el envío de parámetros a través del query string, ahora veremos una forma alternativa de
enviar parámetros.
// GET: /Catalogo/DetalleProducto/123
public string DetalleProducto(int id)
{
string strMensaje = HttpUtility.HtmlEncode("ID producto = " + id);
return strMensaje;
}
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.
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.
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:
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");
}
Es posible entonces especificar una vista distinta y con un nombre diferente al del Action.
Para agregar la Entidad Empleado al Modelo hacer click derecho en la carpeta Models y seleccionar la opción
Agregar > Clase…
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.
Del mismo modo creamos la Entidad Local, y agregamos sus atributos de acuerdo a:
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.
ViewBag.Empleado1 = empleado_1;
ViewBag.Empleado2 = empleado_2;
ViewBag.FechaHora = DateTime.Now;
return View();
}
@{
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>
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
return View(local_1);
}
Se debe notar que el objeto local_1 se envía como argumento del método View().
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.
@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.