Post 9. Motor de vistas Razor (I)

En esta ocasión hablaremos acerca de Razor, motor que es utilizado en MVC (disponible a partir de MVC3) para poder renderizar nuestras vistas, este motor es como un lenguaje que nos permite "crear" código HTML, con la ayuda de este motor podremos llenar grillas, combos, menús, así mismo podemos crear controles HTML (formluarios, inputs, labels, etc.).

Cuando digo que "es como un lenguaje" me refiero a que Razor no es un lenguaje de programación nuevo que debas aprender, mas bien que es un conjunto de reglas o sintaxis con las que podremos usar los lenguajes de programación que brinda Visual Studio (C# o VB).

Si ya has programado antes en asp o php, pues Razor maneja una forma de trabajo muy parecida en la que combinas el lenguaje de programación con el lenguaje HTML (incluso JS o CSS si es necesario) con el cual podremos generar código de manera mas rápida y reduciendo la cantidad de caracteres.

A diferencia de aspx, en la que podemos "jalar" controles desde nuestra caja de herramientas y automáticamente se nos genera todo el código necesario, lo cual es ventaja y desventaja al mismo tiempo: ventaja porque creamos un control en segundos y desventaja porque el no todo el código generado es necesario o para poder cambiar algún simple atributo se debe hacer desde el código en servidor, en Razor, en cambio, debemos digitar todo el código (y sin opción a vista previa :/ ), y claro que intellisense nos ayudara a que esto no sea un calvario, pero podremos manipular más a fondo el código generado. Esta es su mayor ventaja pero como no todo puede ser perfecto, razor nos "obliga" a conocer mas a fondo el lenguaje HTML, JS y CSS, lo cual en el fondo tampoco es tan malo, pero nos hará "sufrir" un poquito más al inicio.

La sintaxis que utilizamos para poder mostrar los ViewBag/ViewData y los modelos dentro de nuestras vistas fueron nuestros primero pasos en Razor. En este post veremos el uso de las principales propiedades de una pagina Razor:

@ViewData / @ViewBag

Ya sabemos como utilizar estas propiedades:

@ViewBag.Message
@ViewData.["Message"]

@Model

Utilizamos esta propiedad para especificar el modelo a utilizar en nuestra vista, no es obligatorio colocarlo, pero usarlo o no usarlo nos puede ayudar de diversas maneras. Una de las ventajas de especificar la clase que se utilizará en la vista es que intellisense nos ayuda a generar la vista con su autocompletar. Por otra parte si no se coloca @model la vista puede ser reutilizada por distintos controladores, siempre y cuando posean el nombre de  sus atributos iguales, esto en la práctica no es muy usual, por lo cual se recomienda siempre especificar la clase modelo para cada vista.

Su sintaxis es de la siguiente manera:

@model Razor.Models.AutorModel

@using

Su funcionalidad es la misma que using en cualquier clase, usaremos @using cuando deseemos utilizar alguna clase o función de alguna dll, librería de clases o que se encuentre en un distinto namespace.

Su sintaxis es de la siguiente manera:

@using Razor.Helpers

@Html - Helpers

Este control mas conocido como Helpers Html, es el más usado en razor (y se podría decir el más importante), con él podremos crear cualquier objeto html, label, inputs, forms, textarea, etc.

A continuación les dejare ejemplos de los casos mas usados, en un siguiente post mostraremos un ejemplo de cada uno de los tipos, por ahora tendremos solo un avance:

@Html.TextBoxFor(m => m.Nombre)

@* Comentarios *@

Pues como se ve arriba para agregar comentarios en razor solo se debe colocar el texto entre "@*" y "*@". Nótese que estos comentarios son solo comentarios en la página razor y no generar ningún código Html.

@*Esto es un comentario en razor*@

A continuación mostraremos los ejemplos usados en un nuevo proyecto, el cual se creó con una plantilla "Internet Application" (por cuestiones de que ya tiene estilos CSS y se ve más "bonito")

/Controllers/HomeController.cs

using System.Web.Mvc;
using Razor.Models;

namespace Razor.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         AutorModel model = new AutorModel("Diego","Arango","Garcia");
         ViewBag.Message = "Aprender Razor en ASP.NET MVC!";
         return View(model);
      }

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

/Models/AutorModel.cs

using System;
using System.Collections.Generic;

namespace Razor.Models
{
   public class AutorModel
   {
      public string Nombre { get; set; }
      public string ApellidoP { get; set; }
      public string ApellidoM { get; set; }
      public DateTime FechaActual { get; set; }

      public AutorModel() { }
      public AutorModel(string Nombre, string ApellidoP, string ApellidoM) {
         this.Nombre = Nombre;
         this.ApellidoP = ApellidoP;
         this.ApellidoM = ApellidoM;
         this.FechaActual = DateTime.Now;
      }
   }
}

/Views/Home/Index.cshtml

@model Razor.Models.AutorModel
@using Razor.Helpers

<h2>@ViewBag.Message</h2>
<p>
   @*Esto es un comentario en razor*@
   Este post fue creado por @Model.Nombre @Model.ApellidoP<br />
   el @Formateador.FormatoFecha(Model.FechaActual)
   <br /><br />
   Actualizar datos del Autor:<br />
   @Html.TextBoxFor(m => m.Nombre)<br />
   @Html.TextBoxFor(m => m.ApellidoP)<br />
   @Html.TextBoxFor(m => m.ApellidoM)<br />
</p>

Al ejecutar veremos el siguiente resultado:

Con estos ejemplos iniciales de como usar razor nos despedimos hasta el siguiente post, donde veremos la forma de conbinar nuestro codigo html con razor y C# para poder generar codigo HTML dinámicamente, hasta la próxima.

Las fuentes para este ejemplo puden descargarlas aqui.

Nota:
Se eliminaron del proyecto (ya que no eran necesarios para el ejemplo) los siguientes archivos: /Controllers/AccountController.cs.
/Models/AccountModels.cs.
/Views/Shared/_LogOnPartial.cshtml
/Views/Account/ (carpeta).
Ademas se modificó el archivo "/Views/Shared/_Layout.cshtml" cambiando "<div id="logindisplay"> @Html.Partial("_LogOnPartial") </div>" por "<div id="logindisplay"> &nbsp; </div>".