Programación II Ing.

Guillermo Rivera

UNIDAD III – DISEÑO DE APLICACIONES WEB UTILIZANDO BASE DE

DATOS Y EL MODELO DE CAPAS CON MVC.
3. Vistas en ASP.NET MVC.

INTRODUCCIÓN.
Los desarrolladores invierten mucho tiempo enfocándose en creación de controladores y modelos
de objetos bien hechos y por una buena razón, porque el código limpio y bien escrito en estas áreas
forma la base de una aplicación web sostenible.
Pero cuando un usuario visita la aplicación web en un navegador, nada de este trabajo es visible. La
primera impresión e interacción del usuario con la aplicación empieza con la vista. Por tanto, la vista
es efectivamente el primer embajador de la aplicación ante el usuario.
Evidentemente si el resto de la aplicación tiene errores no hay cantidad de palabras ni maquillaje
que compense esas deficiencias. De la misma manera, construir una vista poco atractiva y difícil de
usar provoca que los usuarios no le den a la aplicación la posibilidad de demostrar la riqueza de
características y que se encuentre libre de errores.
La vista es responsable de proporcionar la interface de usuario. Después que el controlador ha
ejecutado la lógica apropiara para la URL solicitada, delega la presentación a la vista. A diferencia
de frameworks basados en archivos (como ASP.NET y PHP), las vistas no son directamente
accesibles: no se puede decir al navegador que vaya a una vista y obtenerla. En lugar de eso, una
vista es siempre generada por un controlador, el cual proporciona los datos que la vista mostrará.
En algunos casos sencillos la vista necesita poca o ninguna información del controlador. Más a
menudo, el controlador necesita proporcionar alguna información a la vista, por lo que le pasa un
objeto de transferencia de datos llamado el modelo. La vista transforma el modelo en un formato
listo para ser presentado al usuario. En ASP.NET MVC, la vista logra esto examinando el objeto
modelo entregado por el controlador y transforma el contenido en HTML.

Nota: No todas las vistas producen HTML. HTML es ciertamente el caso más común cuando se
construye aplicaciones web. Pero las vistas también pueden producir una amplia variedad de
otros tipos de contenido.

ENTENDIENDO LAS VISTAS.

ASP.NET MVC no incluye nada que corresponda directamente a una página. En una aplicación
ASP.NET MVC no hay una página en el disco que corresponda a la ruta en el URL que usted escribe
en la barra de direcciones del navegador. Lo más cercano a una página en ASP.NET MVC es algo
llamado vista.
En una aplicación ASP.NET MVC, las solicitudes recibidas en el navegador son mapeadas hacia los
métodos de acción de los controladores que podrían devolver una vista. Sin embargo, un método
de acción también puede ejecutar algún otro tipo de acción tal como redireccionar hacia otro
método de acción.

1 de 14
Programación II Ing. Guillermo Rivera

Una vista es un documento HTML o XHTML estándar que puede contener scripts, los cuales se usan
para agregar contenido dinámico a la vista.
Construya un proyecto ASP.NET MVC vacío de nombre MVCPaises, en el cual se mostrará un listado
de países.
1. En el menú de Visual Studio .NET seleccione las opciones Archivo, Nuevo, Proyecto.
2. En el menú de la parte izquierda de la pantalla y dentro de la opción C#, seleccione Web.
3. En la parte superior de la pantalla seleccione la opción .NET Framework 4.5.
4. Seleccione la opción ASP.NET Web Application, coloque el nombre MVCPaises.
5. Presione el botón OK.
6. Seleccione la plantilla Empty (ver la ventana New ASP.NET Project).
7. Marque la casilla MVC (ver la ventana New ASP.NET Project).
8. Presione el botón OK.
Observe que en la ventana Solution Explorer aparecen las carpetas Models, Views y Controllers, y
algunos otros elementos básicos, tal como se muestra en la ventana Solution Explorer.

La ventana New ASP.NET Project La ventana Solution Explorer

El sitio web recién creado está totalmente vacío, y si intenta ejecutarlo obtendrá la siguiente
pantalla de error:

2 de 14
Programación II Ing. Guillermo Rivera

Haga clic derecho sobre la carpeta Controllers y seleccione la opción Add, Controller…, tal como se
muestra en la figura siguiente:

Seleccione la opción MVC 5 Controller – Empty, como se muestra:

Presione el botón Add y coloque el nombre HomeController, tal como se muestra

NOTA: Conserve la palabra Controller al final del nombre del controlador.

3 de 14
Programación II Ing. Guillermo Rivera

Observe que se agrega un controlador con el nombre HomeController, con el código siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCPaises.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}

También observe que se ha creado una subcarpeta de nombre Home dentro de la carpeta Views.
Sin embargo, la aplicación web no puede ser ejecutada aún porque hace falta la correspondiente
vista asociada al controlador Index(). Si intenta ejecutar la aplicación obtendrá el error siguiente:

Una alternativa sería modificar el código del controlador, como se muestra:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

4 de 14
Programación II Ing. Guillermo Rivera

namespace MVCPaises.Controllers
{
public class HomeController : Controller
{
// GET: Home
public string Index()
{
return "Aplicación MVC";
}
}
}

Al ejecutar la aplicación web, el resultado sería:

Sin embargo, trabajar de esta manera resulta ilógico porque no se aprovecha la potencia del modelo
MVC y se limita a presentar contenido sencillo, como texto. Para demostrar esto, modifique al
controlador HomeController para que su código sea similar al mostrado:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCPaises.Controllers
{
public class HomeController : Controller
{
public List<string> Index()
{
return new List<string>()
{
"Belice",
"Guatemala",
"El Salvador",
"Honduras",
"Nicaragua",
"Costa Rica",
"Panamá"
};
}
}
}

Ejecute la aplicación y debería obtener un resultado similar al mostrado:

5 de 14
Programación II Ing. Guillermo Rivera

Claramente se observa que el resultado no es el esperado, pero si regresa al código de la aplicación

y coloca el ratón sobre la palabra reservada List obtendrá lo siguiente:

El mensaje es consistente con lo mostrado en el navegador web, aunque no es el resultado

esperado.
Para superar este inconveniente efectúe las siguientes acciones:
1. Modifique el código del controlador de la manera siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCPaises.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ViewBag.Paises = new List<string>()
{
"Belice",
"Guatemala",
"El Salvador",
"Honduras",
"Nicaragua",
"Costa Rica",
"Panamá"
};

return View();
}
}
}

6 de 14
Programación II Ing. Guillermo Rivera

2. Agregue una vista al proyecto MVC, que esté relacionada con el controlador
HomeController. Para ello haga clic derecho sobre el nombre del método de acción Index,
tal como se muestra:

3. Desactive la casilla Use a layout page (ver Ventana Add view) y presione el botón Add. Con
esto se acepta la convención estándar que consiste en usar el mismo nombre del método
de acción en la vista.
Observe que la ventana Solution Explorer ahora muestra una vista asociada al controlador, como
se muestra en la figura siguiente:

Ventana Add view. Ventana Solution Explorer

7 de 14
Programación II Ing. Guillermo Rivera

4. Abra la vista Index(). Observará que contiene el código siguiente:

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>

NOTA: Si ejecuta la aplicación web mostrará una página web sin contenido.

5. Abra la vista relacionada con el método de acción Index() del control HomeController y
sustituya el código anterior con el código siguiente:
@{
ViewBag.Title = "Listado de países";
}

<h2>Listado de países</h2>
<ul>
@foreach (string pais in ViewBag.Paises)
{
<li>pais</li>
}
</ul>

Ejecute la aplicación. Ahora se espera obtener el listado de países, sin embargo se obtiene lo
siguiente:

8 de 14
Programación II Ing. Guillermo Rivera

Modifique el código de la vista de la manera siguiente:

@{
ViewBag.Title = "Listado de países";
}

<h2>Listado de países</h2>
<ul>
@foreach (string pais in ViewBag.Paises)
{
<li>@pais</li>
}
</ul>

Ejecute la aplicación. Ahora el resultado es:

DIFERENCIAS ENTRE VIEWBAG Y VIEWDATA.

ViewBag y ViewData son mecanismos para transferir datos desde un controlador hacia una vista.

ViewBag
Controlador Vista
ViewData

ViewData es un diccionario de objetos que son almacenados y recuperados usando cadenas como
claves. La sintaxis de ambos objetos es:
ViewBag.PropiedadDinámica = "UnValor";
ViewData["UnaClave"] = "UnValor";
ViewBag usa la característica dinámica que fue introducida a C# 4: permite a un objeto tener
propiedades dinámicamente agregadas a él.

9 de 14
Programación II Ing. Guillermo Rivera

Tanto ViewData como ViewBag no proporcionan revisión de errores en tiempo de compilación. Por
ejemplo, si se escribe mal el nombre de la clave o de la propiedad no se obtendría ningún mensaje
de error y se sabría del error hasta el tiempo de ejecución.
Internamente las propiedades de ViewBag son almacenadas como pares clave/valor en el
diccionario ViewData.
Al analizar el código del controlador ahora se tienen dos escenarios:
public ActionResult Index()
public ActionResult Index()
{
{
ViewData["Paises"] = new
ViewBag.Paises = new List<string>()
List<string>()
{
{
"Belice",
"Belice",
"Guatemala",
"Guatemala",
"El Salvador",
"El Salvador",
"Honduras",
"Honduras",
"Nicaragua",
"Nicaragua",
"Costa Rica",
"Costa Rica",
"Panamá"
"Panamá"
};
};
return View();
return View();
}
}

Código del controlador usando ViewBag Código del controlador usando ViewData

El código de la vista es el siguiente:

@{ @{
ViewBag.Title = "Listado de países"; ViewBag.Title = "Listado de países";
} }

<h2>Listado de países</h2> <h2>Listado de países</h2>

<ul> <ul>
@foreach (string pais in @foreach (string pais in
ViewBag.Paises) (List<string>)ViewData["Paises"])
{ {
<li>@pais</li> <li>@pais</li>
} }
</ul> </ul>

Código de la vista usando ViewBag Código de la vista usando ViewData

Generalmente, la mayoría de código encontrado usa ViewBag en lugar de ViewData y esto no

presenta ninguna ventaja técnica al escoger una sintaxis sobre la otra. Sin embargo existen algunas
diferencias importantes entre las dos sintaxis:
1. ViewBag trabaja solamente cuando la llave que se accede es un identificador C# válido. Por
ejemplo, si se coloca un valor en ViewData[“Clave con espacios”] no se puede acceder ese
valor usando ViewBag porque el código no compilará.
2. No se pueden pasar valores dinámicos como parámetros a métodos de extensión. El
compilador de C# debe conocer el tipo de datos real de cada parámetro en tiempo de
compilación para seleccionar el método de extensión adecuado. Si un parámetro es
dinámico, la compilación fallará. Por ejemplo, este código siempre fallará:
@Html.TextBox("nombre", ViewBag.Nombre). Para evitar este error utilice la sintaxis

10 de 14
Programación II Ing. Guillermo Rivera

ViewData["Nombre"] o convierta el valor a un tipo de datos específico:

(string)ViewBag.Nombre.

EL MOTOR DE VISTAS RAZOR.

ASP.NET MVC incluye dos diferentes motores de vista: el nuevo motor de vistas Razor y el viejo
motor de vistas Web Forms. Debido a que Web Forms es eminentemente código HTML, se creó el
motor de vistas Razor que posee las siguientes características:
1. Es un motor de vistas sencillo, limpio y ligero que no contiene sintaxis que propicie la
generación de código mal diseñado, innecesariamente complicado o no deseado.
2. Proporciona una sintaxis coordinada que minimiza la cantidad de sintaxis y caracteres extra
al entender la estructura de marcación de forma tal que la transición entre código y
marcación sea lo más suave posible.

Expresiones de código.
El carácter clave de transición en Razor es el signo arroba (@). Este único carácter es usado para
hacer la transición entre el lenguaje de marcación y el código, e incluso a veces también para hacer
una transición inversa. Los dos tipos básicos de transiciones son expresiones de código y bloques de
código. Las expresiones son evaluadas y escritas en la respuesta.
Por ejemplo, en el siguiente fragmento:
<h1>Listing @items.Length items.</h1>

Observe que la expresión @items.length es evaluada como expresión de código implícito y el

resultado es mostrado en la salida. Una cosa a observar es que no fue necesario demarcar el final
de la expresión de código. En contraste, con una vista Web Forms que soporta sólo expresiones de
código explícitas habría quedado de la siguiente manera:
<h1>Listing <% items.Length %> items.</h1>

Razor sabe que el carácter de espacio después de la expresión no es un identificador válido, por lo
que realiza una suave transición de vuelta hacia el lenguaje de marcación.
Observe que el carácter después de la expresión de código @item es un carácter de código válido,
por lo cual Razor revisa el carácter siguiente y encuentra un paréntesis angular que no es un carácter
válido y automáticamente hace una transición a lenguaje de marcación.
Esta habilidad de hacer transiciones automáticas entre código C# y lenguaje de marcación es uno
de los mayores recursos de Razor para mantener la sintaxis compacta y limpia.

Sintaxis de Razor.
Las principales reglas de sintaxis para Razor con C# son las siguientes:
 Los bloques de código Razor se encuentran encerrados con @{ ... }.
 Las expresiones inline (variables y funciones) inician con @.
 Las sentencias de código terminan con punto y coma.

11 de 14
Programación II Ing. Guillermo Rivera

 Las variables son declaradas con la palabra reservada var.

 Las cadenas están encerradas con comillas dobles.
 El código C# es sensible a mayúsculas y minúsculas.
 Los archivos C# tienen la extension .cshtml.

Aplicar diseño en la aplicación web MVC.

Aunque la presentación y diseño no es parte del curso, se explica brevemente cómo insertar una
hoja de estilo CSS para aplicar diseños a la aplicación web MVC.
1. Construya un archivo css de nombre design.css con el código siguiente:
html {
background: radial-gradient(red, yellow, rgb(30, 144, 255));
background-attachment: fixed;
}

body {
margin-top: 0px;
margin-bottom: 0px;
}

2. Incluya el archivo design.css en el proyecto. Para ello haga clic derecho y agregue una
carpeta nueva de nombre Content.
3. Haga clic derecho sobre la carpeta y seleccione la opción Add, Existing Item…, tal como se
muestra:

12 de 14
Programación II Ing. Guillermo Rivera

4. Seleccione el archivo design.css que acaba de crear. Ahora el archivo es parte del proyecto
web MVC, como se muestra en la ventana Solution Explorer y el contenido en la pantalla
central.

NOTA: A partir de este momento, cualquier cambio en el código del archivo design.css se
hace directamente en la ventana que se muestra.

5. Modifique el código de la vista de la manera siguiente:

@{
ViewBag.Title = "Listado de países";
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Países de Centroamérica</title>
<link rel="stylesheet" href="~/Content/design.css">
</head>
<body>
<div>
<h2>Listado de países</h2>
<ul>
@foreach (string pais in ViewBag.Paises)
{
<li>@pais</li>
}
</ul>
</div>
</body>
</html>

13 de 14
Programación II Ing. Guillermo Rivera

6. Ejecute la aplicación. Ahora el resultado es:

NOTA: Gran parte de este material ha sido tomado de los videos publicados por Kud Venkat de
Pragim Technologies, Marathalli, Bangalore, India. Puede encontrar los videos originales en la
direción URL siguiente:
http://csharp-video-tutorials.blogspot.com/p/aspnet-mvc-tutorial-for-beginners.html

14 de 14