afelipelc.xochiltepec.com.

mx
http://af elipelc.xochiltepec.com.mx/2010/10/mi-primera-aplicacion-asp-net-mvc-2-paso-a-pasoparte-3/
Mi primera aplicacin ASP.NET MVC 2 paso a paso parte
3 afelipelc Blog
Continuando con el desarrollo de nuestra aplicacin ASP.NET MVC 2 del tutorial original : Build your First
ASP.NET MVC Application :: http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part1
En esta parte, crearemos el controlador (Peliculas) que en la pgina principal mostrara la lista de gneros,
donde al elegir alguno, cargara la lista de las Pelculas de dicho Gnero.
Agregar una clase controlador >> Controller
Los controladores definen mtodos tambin llamados acciones (Un controlador aparte de ejecutar todas las
acciones definidas, podemos decir que nos crear otro nivel (seccin) en nuestro sitio). Como en la 1ra
parte comentamos que el controlador Home, es el que ejecuta las acciones de la pgina principal de
nuestro sitio http://localhost/ que es igual a http://localhost/Home entonces si agregamos un controlador
llamado Peliculas, como resultado tendremos la direccin http://localhost/Peliculas
Para agregar el controlador llamado Peliculas, nos ubicamos sobre la carpeta Controllers, clic
derecho, Agregar / Controlador.
Img. 1.- Agregar un controlador
En la ventana especificamos el nombre
Img. 2.- Asignar nombre al
controlador
Importante: Al mostrarse esta
ventana, automticamente nos
agrega el sufijo Controller al
nombre del controlador que
aparece con resalto DefaultN,
entonces si nuestro controlador
va a llamarse Peliculas,
cambiaremos DefaultN por
Peliculas quedando
PeliculasController y damos
Agregar sin activar Agregar
mtodos de accin ya que
nosotros agregaremos acciones personalizadas.
Nota: la palabra Controller No debe ser eliminada, ASP.NET busca las clases que llevan este sufijo para
identificarlas como controladores.
Img. 3.- Agregar controlador
Peliculas
La clase controlador llamada
Peliculas ha sido creada y
empezaremos a agregar nuestro
cdigo.
Debemos agregar el using del
(los) Modelo(s). Que son todas
las clases definidas dentro del
espacio de nombres
Peliculas.Models (Se
encuentran dentro de la carpeta
Models)
using Peliculas.Models;
//Dentro de
public class PeliculasController: Controller
{
//Declaramos una instancia de nuestro EntityModel llamado PeliculasEntities
PeliculasEntities DB = new PeliculasEntities();
Nota: Cabe mencionar que al tener un elemento ADO.NET Entity Data Model, las tablas son llamadas
Entidades, que dentro de un modelo, una entidad es una clase donde los campos se convierten en
propiedades que podemos llamarlas y asignarles un valor igual a una propiedad de cualquier otra clase.
Entonces como lo primero que debe mostrase en http://localhost/Peliculas ser la lista de Gneros
disponibles, en la accin (Metodo) Index() que es la accion por defecto del controlador creado, creamos una
variable que cargue el contenido de la entidad Genero de nuestro modelo.
El cdigo del controlador Peliculas queda as:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

//Declaramos el using de nuestros modelos
using Peliculas.Models;

namespace Peliculas.Controllers
{
public class PeliculasController : Controller
{
//crear instancia del entity model (Base de datos)
PeliculasEntities DB = new PeliculasEntities();

//
// GET: /Peliculas/
public ActionResult Index()
{
//cargar la entidad Genero en la variable generos
var generos = DB.Genero;

//Devolvemos a la vista Ixdex.aspx del controlador Pelicula la lista de Generos
// que deber mostrar al usuario
return View(generos.ToList());
}

}
}
Cada accin de un controlador tiene definida una vista, por ejemplo la accin Index() tiene una vista llamada
Index.aspx, la accin Buscar() => Buscar.aspx, Detalles() => Detalles.aspx, etc
Para crear la vista de una accin, dar clic derecho dentro de la accin (Index() en este caso) / Agregar
Vista.
Img. 4.- Agregar la Vista de una Accion
Cuando muestre la ventana Agregar Vista, el nombre lo dejamos igual que el de la accin, como lo que
vamos a mostrar es el contenido de la entidad Genero, elegimos Crear una vista fuertemente tipada, en
Clase de datos de view, elegimos la entidad que vamos a mostrar, en este caso Genero
(Peliculas.Models.Genero), en contenido de view, seleccionamos List que generar automticamente el
cdigo que mostrara la lista de gneros en la pgina, dar clic en Agregar.
La vista Index.aspx es la pagina por defecto que se mostrara cuando ingresemos a http://localhost/Peliculas
Podemos observar que la plantilla donde se mostrara el contenido de la vista es Site.Master y el contenedor
se llama MainContent (que fue lo que vimos en la primera parte).
Img. 5.- Crear la Vista Index.aspx de la
accin Index() de controlador Peliculas
El cdigo generado es
Img. 6.- Cdigo de la vista Index.aspx del controlador Peliculas
Como la tabla Genero de la BD est vaca, agreguemos algunos gneros conocidos (abrir Peliculas.mdf e ir
a tablas).
Despus de agregar algunos registros, ejecutamos nuestra aplicacin y accedemos a Peliculas en la barra
de direcciones >> ejemplo: http://localhost:7406/Peliculas ya que an no tenemos un link que nos lleve a
esa direccin.
Nota: El servidor IIS con el que cuenta Visual Studio para ejecutar los proyectos ASP.NET abre un puerto
de nuestro localhost para nuestra aplicacin, en mi caso es el puerto 7406, si ejecuto mi aplicacin, me la
muestra en http://localhost:7406/
Img. 7.- La vista Index.aspx mostrando los resultados
Pero como al usuario no vamos a mostrarle los links para agregar, eliminar o editar algn registro,
eliminamos la columna de la tabla generada que contiene los Html.ActionLink junto con la columna que
muestra el campo GeneroId para no mostrar los ndices.
El cdigo de nuestra vista Index.aspx del controlador Peliculas quedara as:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Peliculas.Models.Genero>>"

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Generos disponibles
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Generos disponibles en mi coleccin.</h2>

<table>
<tr>
<th>
Nombre
</th>
</tr>

<% foreach (var item in Model) { %>

<tr>
<td>
<%: item.Nombre %>
</td>
</tr>

<% } %>

</table>
</asp:Content>
Observa que la lista de gneros (Obtenida del modelo pasado por la accin Index() en el controlador) es
impresa recorriendo los elementos del modelo con un foreach.
Si volvemos a ejecutar nuestro proyecto y nos vamos otra vez a Peliculas, ahora tenemos:
Img. 8.- Personalizando la vista Index.aspx
Para tener acceso a la seccin Peliculas, agregamos el link a nuestra plantilla (Site.Master en el explorador
de soluciones y a la carpeta Views/Shared/) en la lista menu:
<ul id="menu">
<li><%: Html.ActionLink("Pgina principal", "Index", "Home")%></li>
<li><%: Html.ActionLink("Peliculas", "Index", "Peliculas")%></li>
<li><%: Html.ActionLink("Acerca de", "About", "Home")%></li>
</ul>
Y al actualizar la pgina obtenemos:
Img 9.- Resultado de agregar links a la plantilla Site.Master
Ahora vamos a hacer que al dar clic sobre algn Gnero, nos cargue la lista de las pelculas de ese gnero.
Detener la ejecucin del proyecto
Definimos una nueva accin en el controlador Peliculas llamado Genero() debajo de Index() { }, que pedir
como parmetro el nombre del genero a mostrar.
// GET: /Peliculas/Genero/
public ActionResult Genero(string genero)
{
//hacer una consulta al modelo, cargando el gnero buscado incluyendo
//todas las pelculas relacionadas a ese genero

//creamos nuestra consulta LINQ

var PeliculasGenero = DB.Genero.Include("Pelicula").Single(g => g.Nombre == genero);

//Como a la vista solo se le pasa el modelo que contiene la lista de pelculas
//del gnero seleccionado
//Pasamos a la vista algunos datos por medio de parmetros
ViewData["Genero"] = genero; //Nombre del genero

//Devolver el modelo que contiene todas las pelculas encontradas
return View(PeliculasGenero.Pelicula.ToList());
}
Creamos la vista fuertemente tipada de la clase Pelicula, con contenido List
Img. 10.- Crear la vista Genero.aspx
Antes de ver el resultado, debemos
agregar algunos registros de pelculas
manualmente a la tabla Pelicula de la
BD Peliculas.mdf
Img. 11.- Agregar registros a la tabla Pelicula
Nos falta generar los Links de la lista de Gneros en la vista Index.aspx
Reemplazamos el cdigo que imprime el nombre de los generos
<%: item.Nombre %>
Por:
<%// Genera un link con parmetros del tipo: http://localhost:7406/Peliculas/Genero?genero=NombreGenero %>
<%: Html.ActionLink(item.Nombre, "Genero", "Peliculas", new { genero = item.Nombre }, null
Ejecutamos y vemos los resultados en http://localhost:7406/Peliculas/ dando clic en algn gnero.
Img. 12.- Resultado de la vista Genero.aspx mostrando las peliculas del genero seleccionado.
Igual que en la lista de gneros, al usuario no vamos a mostrarle los links de Editar, Eliminar o crear nuevo
registro, entonces eliminamos esa columna y la de PeliculaId. Pero si vamos a darle la opcin de ver los
detalles de la pelcula, para ello convertimos en Link el ttulo de las pelculas.
El cdigo de la vista Genero.aspx mostrando tambin lo que recibe por el parmetro ViewData["Genero"] y
el ttulo de la pelcula convertido en link con algunas otras modificaciones como mostrar SI en vez de True y
No en vez de False (en Disponible), quedara as:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Peliculas.Models.Pelicula>>"

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<% //Generamos el ttulo de nuestra pgina %>
Clasificacin por gnero <%: ViewData["Genero"] %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% //Generamos el ttulo del contenido de nuestra pgina y mostramos el total de pelculas del gnero seleccionado %>
<h2>Clasificacin por gnero <%: ViewData["Genero"] %></h2>
<p>(<%: Model.Count()%>) pelculas de este gnero.</p>

<table>
<tr>
<th>
Titulo
</th>
<th>
<%//Cambio el texto de FechaLanzamiento a Fecha de Lanzamiento %>
Fecha de Lanzamiento
</th>
<th>
Gnero
</th>
<th>
Precio
</th>
<th>
Disponible
</th>
</tr>

<% foreach (var item in Model) { %>

<tr>
<td>

<% //Convertimos item.Titulo en un vinculo que nos lleve a detalles del registro
//Genera el link http://localhost:7406/Peliculas/Details/N %>
<%: Html.ActionLink( item.Titulo, "Detalles", new { id=item.PeliculaId
</td>
<td>
<% //Para que muestre el formato dd/mm/yy cambiamos de "{0:g}" a "{0:d}" %>
<%: String.Format("{0:d}", item.FechaLanzamiento) %>
</td>
<td>
<% //Para mostrar el nombre del Genero en lugar del GeneroId
//Cambiamos item.GeneroId por item.Genero.Nombre (obteniendo los datos por la relacion que existe) %>
<%: item.Genero.Nombre %>
</td>
<td>
<%: String.Format("{0:F}", item.Precio) %>
</td>
<td>
<% //item.Disponible muestra True o False (es de tipo Boleano), debemos poner una condicin para que en el estado Disponible muestre (Si/No) %>
<% try
{
if ((bool)(item.Disponible))
{ %>
Si
<%
}
else
{ %>
No
<% }
}
catch
{
%>
No <% //Si Disponible es NULL, se producira un error, entonces lo tomamos como NO %>
<%
} %>
</td>
</tr>

<% } %>

</table>
</asp:Content>
El resultado es:
Img. 13.- Vista Genero.aspx personalizada.
Hasta aqu ya tenemos nuestra tabla de datos personalizada.
En este mdulo nos falta crear la accin Detalles().
Debajo de la accin Genero() del controlador Peliculas, definimos la accin Detalles() que recibe como
parmetro PeliculaId.
// GET: /Peliculas/Detalles/N
public ActionResult Detalles(int id)
{
//Creamos la consulta LINQ que obtiene un solo registro, donde Pelicula.PeliculaId sea
//igual al ID pasado en el parametro id
var pelicula = DB.Pelicula.Single(p => p.PeliculaId == id);
//Devolvemos el modelo (resultado) a la vista
return View(pelicula);
}
Creamos la vista fuertemente tipada de la clase Pelicula y en contenido elegimos Details. Esto har que se
muestren los detalles del registro.
Img. 14.- Crear la vista Detalles.aspx
Ejecutamos y seleccionamos algn
ttulo de nuestra lista de pelculas.
Img. 15.- Resultado de la vista Detalles.aspx
Personalizando el cdigo de la vista Detalles.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Peliculas.Models.Pelicula>"

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Pelicula <%: Model.Titulo %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2><%: Model.Titulo %></h2>

<p>
<em>Genero: </em>
<%: Model.Genero.Nombre %>
</p>
<p>
<em>Fecha de lanzamiento: </em>
<%: String.Format("{0:d}", Model.FechaLanzamiento)%>
</p>
<p>
<em>Precio: </em>
<%: String.Format("{0:F}", Model.Precio) %>
</p>

<p>
<em>Estado: </em>
<% try
{
if ((bool)(Model.Disponible))
{ %>
Disponible
<%
}
else
{ %>
No disponible
<%
}
}
catch
{
%>
No disponible
<%
} %>
</p>
<p>
<%: Html.ActionLink("Regresar al indice", "Index") %>
</p>

</asp:Content>
Ejecutamos el proyecto y obtenemos.
Img. 16.- Resultado de la Vista Detalles.aspx personalizada.
Hasta aqu termina nuestro controlador llamado Pelculas que nos genera el catlogo de Generos que el
usuario puede elegir para ver el catlogo de pelculas de cada gnero.
En la siguiente parte, crearemos el controlador Administrar (donde podremos agregar, modificar y eliminar
los registros)
Mi primera aplicacin ASP.NET MVC 2 paso a paso parte 3, 5.0 out of 5 based on 1 rating