[ASP.NET MVC] Una referencia sobre las vistas

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!

7 comments

Leave a Reply

Your email address will not be published. Required fields are marked *