MegaTutorial(part 2) How to: ASP.NET MVC 2

Bubuenas noches to everyone!, pues asi es mientras no pueda instalar silverlight bien en mi computadora, seguire con los tutoriales de MCV, y pues como ya empeze con la primera parte! no lo dejare a medias!!, espero alguien los lea u_u, si mi dashboard no me miente 14 personas han visto la parte 1 JAJA!, en fin comencemos!.

Views y ViewsModels
Conceptos:

  • Las vistas nos permiten insertar contenido ( en vez de cadenas como en el post anterior)
  • Las vistas siguen la siguiente nomenclatura :/Content/Action
  • Los ViewsModel nos ayudan a pasar informacion del “Controller Action” a nuestra vista

Como vimos en el post pasado, de como el Action Controller nos devolvia una cadena, es una manera simple de comprender como funcionan estos, por ejemplo en nuestro controlador “StoreController”, en el Controller Action llamado Browse, al llamarlo de la manera  /Store/Browse, este nos devolvia lo que programamos, en el ejemplo anterior era una cadena, pero su funcion es mostrarnos los datos que iran en una vista(view), que es lo que haremos en esta parte

Usando una MasterPage

las “Master Pages” nos proporciona la habilidad de definir una estructura y unos elementos de interfaz comunes para nuestro sitio, tales como la cabecera de página o la barra de navegación, en una ubicación común denominada “master page”, para ser compartidos por varias páginas del sitio. Para agregar una solo tenemos que irnos a /Views/Shared

Le llamaremos “Site”

Queremos un header con varios links de la pagina como Home, store etc. so agregamos al Site.Master lo siguiente:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link href="/Content/Site.css" rel="Stylesheet" type="text/css" />
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
<body>
    <div>
        <div id="header">
            <h1>ASP.NET MVC Music Store</h1>
            <ul id="navlist">
                <li><a href="/" id="current">Home</a></li>
                <li><a href="/Store/">Store</a></li>
            </ul>
        </div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">

        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

Agregando una vista(View)
Ahora creo que estamos listos para agregar nuestra primera vista para la pagina principal “Home”, esta lo haremos en el controlador HomeController y modificaremos el Controller Action llamado “Index”, creo que es el unico que tenemos en este controlador XD, entonces quedaria de la siguiente forma (como estaba antes)


public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }
}

Para agregar una vista a este Controller Action le damos click derecho en el metodo exactamente


Agregamos la vista y automaticamente visual studio creara un Index.aspx que podra ser visto en el directorio /Views/Home

Si se fijan se creo una carpeta llamada “Home” de nuestro controlador HomeController y creamos una vista de nuestro controller action  Index() que es el Index.aspx, todo concuerda!, todo se debe de llamar asi, esto permite que no debemos especificar el nombre y la localizacion de cada uno de estos, recuerden la nomenclatura /Content/Action o tambien /Store/Browse (ejemplo del otro post)  de StoreController del action Browse, todo esto se hace solito.

Modificaremos nuestra vista Index de la siguiente manera, solo para tener la pagina principal


<asp:content id="Content1" contentplaceholderid="TitleContent" runat="server">
	Home
</asp:content>
<asp:content id="Content2" contentplaceholderid="MainContent" runat="server">

    <h2>This is the Home Page</h2>

</asp:content>

Corramos la aplicacion y tendremos lo siguiente

Veamos que hemos cambiado:

  • La pagina Home esta usando el template MasterPage, entonces lo que tenga la MasterPage, se mostrara en todas las paginas
  • El controlador HomeController y su metodo Index() nos devuelve una vista siguiendo la nomenclatura

Usando un ViewModel para pasar informacion a nuestra View

Ok el chiste es hacer una pagina dinamica, entonces necesitaremos pasar informacion de  los metodos de nuestro controlador a nuestras vistas. Una tecnica comun es crear un ViewModel, el cual nos permite como empaquetar toda la informacion que la View va a necesitar al mostrarla

Cambiaremos nuestro metodo Index() pero ahora del controlador Store para hacer lo siguiente:

En el indice de /Store nos mostrara los generos que tenemos en nuestra tienda. Primero crearemos una carpeta que llamaremos “ViewModel”, para guardar todos los modelos.

Creamos un modelo para el indice de nuestra pagina /Store, dando click derecho como se muestra( mas facil no se los dejo =D )

Llamaremos la clase  “StoreIndexViewModel”, y lo agregamos

En nuestro modelo, le agregamos 2 propiedades, que es las que usara nuestra vista del indice store, que sera una lista de generos y cuantos de estos tenemos, usaremos la coleccion List para guardar una lista de strings, entonces a nuestro modelo agregamos lo siguiente:

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

namespace MvcMusicStore.ViewModels
{
    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
        public List<string> Genres { get; set; }
    }
}
Nota!: Si de pura casualidad estas asombrado sobre  {get; set;} esto hace que C# auto-implemente eso como propiedades, nos da el beneficio de no tener que declararlo todo.

Agregamos nuestros modelos al controlador Store debajo de las sentencias “using”
using MvcMusicStore.ViewModels;

Ahora cambiaremos el indice de la pagina store  para que nos muestre los generos que tenemos, usaremos la sintaxis para inicializar un Object, para asi crear las variables mas rapido.

//
// GET: /Store/

public ActionResult Index()
{
    // Crea Lista de generos
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco" };

    // Crea nuestro modelo de vista
    var viewModel = new StoreIndexViewModel {
        NumberOfGenres = genres.Count(),  //Numero de elementos
        Genres = genres                   //Lista con los generos
    };

    return View(viewModel);
}
Nota: Como yo no estoy familiarizado con C#, la sentencia var por lo que entiendo declaramos digamos un tipo Object, osea que puede ser cualquier cosa

Antes de continuar vamos a construir el projecto
Agregamos una vista al Index de Store, como lo hicimos con el Index de Home, dando click derecho en el metodo
Pero como ahora tenemos un modelo!, se lo vamos a asignar asi como se muestra en la imagen, seleccionamos Create a strongly-typed view, y ponemos nuestra clase StoreIndexViewModel, que sera nuestro modelo a usar.
Ahora ya tenemos el indice de Store  (o sea /Store/) y como les dije, mostraremos los generos que tenemos, usaremos 2 tipos de etiquetas:
  • El codigo que este encerrado por estas etiquetas
     <% %>   

    sera ejecutado

  • Al igual que el codigo que este encerrado en estas etiquetas
     <%: %>   

    sera ejecutado, y nos devolvera un resultado

Bueno aqui viene la magia de visual studio, como le indicamos que modelo usar, visual studio ya sabe cuales son las propiedades que usara esta vista, recuerden que tenemos NumberOfGenres y Genres, estos estaran listos para usar en nuestra vista =D del indice store.

En nuestra vista pondremos ver que visual studio nos pone que propiedades tenemos del modelo creado. Ahora lo que haremos es mostrar todos los generemos que tenemos, que estos estan almacenados en una lista llamada Genres, y las mostraremos de la siguiente manera:

<ul>
    <% foreach (string genreName in Model.Genres) { %>
        <li>
        <%: genreName %>
        </li>
    <% } %>
</ul>

Usando las etiquetas ya mencionadas, estamos creando un bucle por cada elemento que existe en la lista Genres, y estos se guardan en genreName y lo mostramos en un listado. Finalmente nuestra vista del indice(Index) de /Store/ quedaria de la siguiente manera:


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.ViewModels.StoreIndexViewModel>" %>

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

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

    <h3>Browse Genres</h3>

    <p>Select from <%: Model.NumberOfGenres %> genres:</p>

    <ul>
        <% foreach (string genreName in Model.Genres) { %>
           <li>
            <%: genreName %>
           </li>
        <% } %>
    </ul>

</asp:Content>

Bueno pues corremos la aplicacion, y ya sabemos cual sera el resultado al entrar a store

Un ViewModel mas complejo, para  Store/Browse y el indice

Ok ahora haremos una pagina que lee el nombre del Genero desde la URL y lo muestra en la pagina con los Albums que se tendran con ese genero de musica, trataremos que quede asi:

Si se fijan estamos obteniendo el nombre del genre desde la URL y nuestro controlador hara una busqueda con los albums que tenemos, por el momento pondremos nosotros que albums tenemos, pero en la parte 3 lo haremos desde una base de datos que despues les pasare!

Para esto vamos a crear 2 modelos mas, pero ahora en la carpeta Models, van a ser 2 clases una se llamara “Genre” y la otra “Album”, vamos a la carpeta Models y con click derecho agregamos las 2 clases

La clase Genre sera de la siguiente manera:

public class Genre
{
       public string Name { get; set;}
}

La clase Album quedara con estas propiedades:

public class Album
{
public string Title { get; set; }
public Genre Genre { get; set; }
}
Nuestra pagina Browse nos mostrara un genero y todos los albums que tengamos con este genero. Como lo sera siempre un modelo sera genial para exponer esta informacion en una vista. Vamos a crear un ViewModel que se llame “StoreBrowseViewModel” ( de la misma manera que creamos StoreIndex.., en la carpeta ViewModels, add | class). A este modelo le agregaremos 2 propiedades, pero primero vamos a importar la carpeta Models, donde estan las 2 clases que acabamos de crear, creamos un objeto tipo Genre y una lista que contenga objetos tipo Album:
using System;
using System.Collection.Generic;
etc etc
using MvcMusicStore.Models; // Este es importante que lo agreguen

namespace MvcMusicStore.ViewModels
{
      public class StoreBrowseViewModel
        {
         public Genre Genre {get; set;}
         public List<Album> Albums {get; set;}
        }
}

Ahora estamos listo para cambiar nuestro controller Action Browse, para que nos muestre lo que estamos buscando desde el URL

// GET: /Store/Browse/
public ActionResult Browse()
{
    string genreName =
        Server.HtmlEncode(Request.QueryString["genre"]);

    var genre = new Genre {
        Name = genreName
    };

    var albums = new List<Album>();
    albums.Add(new Album { Title = genreName + " Album 1" });
    albums.Add(new Album { Title = genreName + " Album 2" });

    var viewModel = new StoreBrowseViewModel
    {
        Genre = genre,
        Albums = albums
    };

    return View(viewModel);
}

Ahora le agregaremos una vista, como lo hicimos con index, click derecho en el mismo metodo y agregar vista ( Add View)

Ahora modificaremos nuestra vista que creamos de Browse para que muestre la informacion que el controlador nos devolvera.

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

    <h2>Browsing Genre: <%: Model.Genre.Name %></h2>

    <ul>

    <% foreach (var album in Model.Albums) { %>
        <li><%: album.Title %></li>
    <% } %>

    </ul>
</asp:Content>

Ahora nos vamos al metodo Details y quedara de la siguiente manera:

//
// GET: /Store/Details/5
public ActionResult Details(int id)
{
    var album = new Album { Title = "Sample Album" };
    return View(album);
}

Agregamos una vista a Details

Ahora podemos mostrar el titulo del album en la pagina Details

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcMusicStore.Models.Album>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Details
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Album: <%: Model.Title %></h2>

</asp:Content>

Agregando links
Ok lo que haremos ahora ya para finalizar ( editare el post en un rato para que quede mejor explicado ) en el indice de Store, nos muestra una lista con los generos que tenemos, pues los convertiremos en links para que busquen el genero que seleccionamos, entonces la vista de Index de Store quedara asi:

<ul>
    <% foreach (string genreName in Model.Genres) { %>
        <li>
        <a href="/Store/Browse?genre=<%: genreName %>"><%: genreName %></a>
        </li>
    <% } %>
</ul>

Hemos terminado la parte 2 – views y views models, espera la 3ra parte “Model y Data Acces”

Anuncios

13 comentarios sobre “MegaTutorial(part 2) How to: ASP.NET MVC 2

  1. deberías colgar este material en taringa, esta muy bueno y te harías New Full User =P, cuando tenga tiempo le dare una checada a todo lo que haz puesto porque ahorita estoy hasta la madre de tareas x_X jaja

  2. Muy buen material. Como vos hiciste un excelente aporte yo doy mi granito de arena.

    el tipo var es un tipo implícito que es resuelto en tiempo de compilación, fue creado para linq y está disponible a partir del Framework 3.5 (Creo puede que sea el 3.0). En los casos del ejemplo es igual poner :
    var _album = new Album(); y Album _album = new Album();

    Pero en Linq tenemos las consultas que devuelven tipos anónimos, es decir que no es de un tipo declarado en nuestra aplicación, y se resuelve en tiempo de compilación.

    Espero haber sido claro.

    dejo una referencia.
    http://msdn.microsoft.com/es-es/library/bb383973.aspx

    Muy bueno tu blog te felicito!!!

  3. Cuando intento sacar la vista para el Browse, solo me sale para escoger esta opcion:

    MvcMusicStore.ViewModels.StoreIndexViewModel

    deberia ser: MvcMusicStore.ViewModels.StoreBrowseViewModel

    nose q pasa

    ayuda. gracias

      1. Dure como 3 horas haciendo y volviendo a hacer proyectos y soluciones, por que me pasaba exactamente lo mismo buscaba tutoriales y tutoriales, y el detalle era GENERAR LA SOLUCION demonios jajajajaja

  4. I don’t even understand how I finished up here, but I believed this post used to be great. I do not realize who you are however definitely you are going to a well-known blogger if you are not already. Cheers!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s