[ASP.NET MVC] Una referencia sobre las vistas

Posted on Actualizado enn


Como ya muchos saben, el desarrollo de aplicaciones Web con el framework ASP.NET MVC esta tomando mucha fuerza desde hace ya unos años, actualmente la última versión estable es la 3, sin embargo ya podemos utilizar la número 4 e ir probando sus nuevas características. El patrón MVC se divide en tres componentes principales que son el modelo, la vista y el controlador, y en este post quiero dar una revisión rápida a las vistas, la intención es resumir algunos puntos claves al utilizar las vistas de MVC, sin entrar en demasiada teoría.

Las vistas son la responsables de procesar la UI que será mostrada al usuario, algunas veces tienen una referencia al modelo y en resumen lo que hacen es convertir el modelo en un formato entendible para los usuarios; casi siempre la vista se llamara igual que una acción en el controlador, es decir, si tenemos un controlador llamado HomeController el cual tiene un método llamado Index, la vista debe llamarse (casi siempre es así, pero no es obligatorio) Index.cshtml para C# o Index.vbcshtml en el caso de Visual Basic.

Entonces algunos de los temas a tener claros al usar vistas en ASP.NET MVC son:

Motor de vistas

El motor de vistas es una decisión demasiado importante cuando se crea una nueva vista, ya que este motor define el “lenguaje” a utilizar, hasta la versión 3 de MVC el único motor existente eran vistas de tipo Web Form, es decir páginas .aspx, pero en vista que este tipo de vista no era suficiente, en la versión 3 salió un nuevo motor, RAZOR!!!, y ahora razor es el motor de vistas  predeterminado (claro, aun se puede usar vistas .aspx) y destaca por ser mucho más limpio, liviano y poderoso.

Razor no es un nuevo lenguaje, podríamos decir que razor es código de servidor (C# o Visual Basic dentro de la vista, y se identifica por el uso del signo @.

Luego hare un post sobre razor.

Comentarios

En las vistas podemos tener comentarios, los cuales no se renderizan al cargar una determinada vista, y el utilizarlos es muy sencillo, se inician con @* y finalizan con *@, y pueden ser multilínea.

   1:  @*
   2:      Comentario línea 1
   3:      Comentario línea 2
   4:      Comentario línea 3
   5:  *@

ViewBag

ViewBag es una propiedad que permite almacenar datos en el controlador para luego ser utilizados en la vista, es una propiedad dinámica y no vamos a poder utilizar el intellisense de Visual Studio en este caso, y los datos almacenados en la dicha propiedad también pueden ser accedidos utilizando ViewData, entonces si tenemos un método dentro de un controlador como el siguiente:

   1:  public ViewResult Index()
   2:  {
   3:      ViewBag.Mensaje = "Mensaje generado desde el controlador con ViewBag";
   4:      ViewData["Mensaje"] = "Mensaje generado desde el controlador con ViewData";
   5:      return View();
   6:  }

Desde la vista podemos acceder a los datos almacenados en la propiedad ViewBag de las dos siguientes maneras:
   1:  <div>

   2:      <p>@ViewBag.Mensaje</p>

   3:      <br />

   4:      <p>@ViewData["Mensaje"]</p>

   5:  </div>

A nivel de rendimiento cualquiera de las dos maneras da igual, la diferencia es que con ViewData es posible utilizar una key con espacios, por ejemplo ViewData[“Mensaje 2”], caso que no es posible con ViewBag, que cuál se debe utilizar? en mi opinión la que deseen usar, pero prefiero usar ViewBag.

Vistas fuertemente tipadas

Una característica que me parece muy buena son las vistas fuertemente tipadas, y en resumen son vistas asociadas directamente a una clase de el modelo, lo cual va a permitir utilizar el intellisense de Visual Studio en la vista para poder acceder a las propiedades de la clase relacionada con la vista. Partiendo de una clase Persona (modelo, para el ejemplo no tenemos en cuenta Data Annotations):

   1:  public class Persona
   2:  {
   3:      public int Id { get; set; }
   4:      public string Nombre { get; set; }
   5:      public string Email { get; set; }
   6:  }

Ahora, en la acción del controlador:

   1:  public ActionResult Info()
   2:  {
   3:      var persona = new Persona() { 
   4:          Id = 1,
   5:          Nombre = "Julio A",
   6:          Email = "mvp.julio.avellaneda@hotmail.com"
   7:      };
   8:      return View(persona);
   9:  }

Y finalmente nuestra vista:

   1:  @model VistasTipadas.Models.Persona
   2:   
   3:  @{
   4:      Layout = null;
   5:  }
   6:   
   7:  <!DOCTYPE html>
   8:   
   9:  <html>
  10:  <head>
  11:      <meta name="viewport" content="width=device-width" />
  12:      <title>Info</title>
  13:  </head>
  14:  <body>
  15:      <div>
  16:          <p>Id: @Model.Id</p>
  17:          <p>Nombre: @Model.Nombre</p>
  18:          <p>Email: @Model.Email</p>
  19:      </div>
  20:  </body>
  21:  </html>

Si nos fijamos en la vista, en la primera línea es en donde se especifica la clase del modelo que se va a utilizar en la vista: @model VistasTipadas.Models.Persona

Vistas fuertemente tipadas a colecciones

En el caso anterior, se comento sobre las vistas tipadas a una clase del modelo, y en ese caso se supone solo se disponía de un elemento, ahora extendiendo un poco ese caso, vamos a crear una vista tipada a una lista genérica de una determinada clase, por ejemplo un conjunto de personas, así que reutilizamos la clase persona, y el primer cambio va en el método del controlador:

   1:  public ActionResult List()
   2:  {
   3:      var personas = new List<Persona>() { 
   4:          new Persona(){ Id = 1, Nombre = "Julio A", Email = "mvp.julio.avellaneda@hotmail.com"},
   5:          new Persona(){ Id = 2, Nombre = "Julio A", Email = "mvp.julio.avellaneda@hotmail.com"},
   6:          new Persona(){ Id = 3, Nombre = "Julio A", Email = "mvp.julio.avellaneda@hotmail.com"},
   7:          new Persona(){ Id = 4, Nombre = "Julio A", Email = "mvp.julio.avellaneda@hotmail.com"},
   8:          new Persona(){ Id = 5, Nombre = "Julio A", Email = "mvp.julio.avellaneda@hotmail.com"}
   9:      };
  10:      return View(personas);
  11:  }

En este caso, en el controlador se crea un lista genérica de la clase Persona, y es enviada a la vista, y ahora en la vista:

   1:  @model IEnumerable<VistasTipadas.Models.Persona>
   2:   
   3:  @{
   4:      Layout = null;
   5:  }
   6:   
   7:  <!DOCTYPE html>
   8:   
   9:  <html>
  10:  <head>
  11:      <meta name="viewport" content="width=device-width" />
  12:      <title>List</title>
  13:  </head>
  14:  <body>
  15:      <table>
  16:          <tr>
  17:              <th>
  18:                  @Html.DisplayNameFor(model => model.Id)
  19:              </th>
  20:              <th>
  21:                  @Html.DisplayNameFor(model => model.Nombre)
  22:              </th>
  23:              <th>
  24:                  @Html.DisplayNameFor(model => model.Email)
  25:              </th>
  26:          </tr>
  27:      
  28:      @foreach (var item in Model) {
  29:          <tr>
  30:              <td>
  31:                  @Html.DisplayFor(modelItem => item.Id)
  32:              </td>
  33:              <td>
  34:                  @Html.DisplayFor(modelItem => item.Nombre)
  35:              </td>
  36:              <td>
  37:                  @Html.DisplayFor(modelItem => item.Email)
  38:              </td>
  39:          </tr>
  40:      }
  41:      
  42:      </table>
  43:  </body>
  44:  </html>

Nótese que al inicio de la vista se tiene @model IEnumerable<VistasTipadas.Models.Persona>, lo que indica que se va a trabajar sobre una colección de la clase Persona.

Espero les sea de utilidad el post, saludos!

About these ads

7 comentarios en “[ASP.NET MVC] Una referencia sobre las vistas

    [...] [ASP.NET MVC] Una referencia sobre las vistas [...]

    [...] es que se define el modelo a utilizar con @model IEnumerable<HelperForm_Get.Models.Cliente> (referencia sobre las vistas), luego se hace uso de un helper para definir el formulario Html.BeginForm() y allí dentro una [...]

    luis escribió:
    12/01/2012 en 18:45

    como se puede enviar los cambios realizados en el IEnumerable al controlador POST???

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

    [...] [ASP.NET MVC] Una referencia sobre las vistas [...]

    […] clase cliente, es decir: @model IEnumerable<Grid.Models.Client> (si quieres dale una mirada a Una referencia sobre las vistas), luego se debe hacer un using GridMvc.Html: @using […]

    William Murcia escribió:
    04/22/2014 en 09:21

    Hola Julio excelente informacion de antemano gracias, disculpa la ignorancia tengo una duda: si yo necesito trabajar en la misma vista tanto Listas (@model IEnumerable), y solo manejo de datos (@model VistasTipadas.Models.Persona), cual de estas dos debo poner en mi vista?

    Julio Avellaneda respondido:
    04/22/2014 en 09:52

    Hola William gracias por tu comentario, bueno en tu vista solo deberías un model, es decir puedes usar @model IEnumerable o si requieres dos modelos tambíen puedes usar vistas parciales, y la vista parcial si con un model diferente.

    Saludos.

Deja un comentario

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