Razor View Engine para ASP.NET MVC 3

Una de las novedades con mejor acogida de la nueva versión del frameworkd ASP.NET MVC 3 ha sido sin duda el nuevo motor de vistas llamado Razor. Si bien es cierto que con las primeras versiones y el motor de vistas aspx muchos programadores se echaban para atrás con ASP.NET MVC, con Razor podremos generar vistas de una forma más sencilla y fluida. En este post voy a comentar algunas de las diferencias y mejoras respecto al anterior view engine predeterminado.

En primer lugar, Razor pasa a ser el motor de vistas por defecto, aunque tenemos disponibles ambos al crear un nuevo proyecto o una nueva vista.

Accediendo a variables de servidor

Si recordáis, cuando trabajamos con el aspx view engine, para acceder al contenido de Model, ViewData, helpers, etcétera necesitábamos añadir las siguientes etiquetas: <%: %>

<p>Please enter your username and password. <%: Html.ActionLink("Register", "Register") %>
if you don't have an account.</p>

Con Razor simplemente utilizaremos @ al inicio y el view engine se encargará de determinar hasta dónde debe procesar.

<p>Please enter your username and password. @Html.ActionLink("Register", "Register") if
you don't have an account.</p>

Recorrer una lista

Para recorrer una lista es bastante similar a como lo haríamos con el motor aspx, con la diferencia del etiquetado para comenzar la sentencia foreach.

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>
            @item.FirstName
        </td>
        <td>
            @item.LastName
        </td>
        <td>
            @item.Address
        </td>
        <td>
            @item.E_Mail
        </td>
        <td>
            @item.Mobile
        </td>
    </tr>
}

Si nos fijamos en la llave de cierre del bucle, vemos que en Razor no es necesario etiquetar esa llave :D ya que se supone que pertenece a la llave de apertura abierta anteriormente, caso que no ocurría con aspx view engine:

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.Id }) %> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.Id }) %>
        </td>
        <td>
            <%: item.FirstName %>
        </td>
        <td>
            <%: item.LastName %>
        </td>
        <td>
            <%: item.Address %>
        </td>
        <td>
            <%: item.E_Mail %>
        </td>
        <td>
            <%: item.Mobile %>
        </td>
    </tr>
<% } %>

Bloques de código

Por otro lado, para utilizar bloques de código bastará con utilizar la arroba y abrir llaves para delimitar el espacio abarcado por el bloque.

@{
    ViewBag.Title = "Loop";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Tag <text>

Otro escenario que se nos puede presentar es que dentro de un bloque de código necesitemos añadir código javascript o HTML que no requiera ser procesado por el motor.

<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
@if (DateTime.Now.Year == 2011)
{
    <text>while year is 2011 this should be shown.</text>
}

Para que nos hagamos una idea más clara, si no añadimos el tag <text>, algunas partes del código anterior sería interpretadas como palabras clave.

Archivo _ViewStart.cshtml

Para conseguir unas vistas más limpias y concisas, aparece un nuevo archivo llamado _ViewStart.cshtml.

 

El objetivo del mismo trata de recopilar código común a todas las vistas de la aplicación, simplificando el código de las mismas. Por defecto aparece definido en él el layout utilizado en las vistas, en caso de no ser especificado en las mismas.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Sections 

Otra de las novedades dentro de Razor es la posibilidad de crear secciones.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
                @RenderSection("returngis");
            </div>
        </div>
    </div>
</body>
</html>

 Cuando definimos una sección en el layout, el objetivo principal es que la misma pueda ser modificada dinámicamente dependiendo de la vista que solicitemos de la siguiente manera.

@section returngis{
    <p>Este es un ejemplo para <a href="http://www.returngis.net">Returng(GiS);</a></p>
}

Si tenemos varias vistas dependiendo del anterior layout y no todas asignan un valor a la sección definida anteriormente, al acceder a alguna de las vistas sin esta definición saltaría la siguiente excepción:

Este error ocurre debido a que, por defecto, cuando se define una sección se da por hecho que la misma debe estar implementada en cualquier vista que utilice este layout. Para evitar esto, basta con modificar la definición de la sección agregando el parámetro false al final para convertir la sección de obligatorio a opcional.

@RenderSection("returngis", false)

Nuevos helpers

Por último, y no por ello menos importante :D, se añaden a nuestra lista de helpers 5 más, algunos de ellos imprescindibles:

  • Chart: A partir de la versión 3 no necesitaremos crear un chart from scratch como hacíamos en este antiguo post. Este helper renderiza exactamente las mismas características que en ASP.NET 4.
  • WebGrid: Un helper más que necesario el cual renderiza un grid con paginación y ordenación. Gracias a José M. Aguilar tenemos un tutorial de este helper explicando paso a paso cada una de las funcionalidades.
  • Crypto: Utilizado para crear password hash.
  • WebImage: Se utiliza para renderizar imágenes.
  • WebMail: Nos ayuda en el envío de emails.

Espero que sea de utilidad :D

¡Saludos!

22 comentarios sobre “Razor View Engine para ASP.NET MVC 3

  1. Compartido por Tweets that mention Razor View Engine para ASP.NET MVC 3 | Return(GiS); -- Topsy.com

  2. Compartido por Google Maps API v.3.0 y ASP.NET MVC 3 con Razor | Return(GiS);

  3. Realmente interezante. estaba mas perdido que “MARCOS”, con las RenderBody, RenderPage y RenderSection se refiere…

    Saludos y gracias por la aclaratoria.

  4. A mí, mas allá de lo excelente del post, me parece que toda esta tecnología es una porquería. Es volver al modelo ASP en el cual mezclábamos tags html con código vbscript.
    Lo que me gustó de ASP.NET en su momento (cuando me pasé de ASP y estaba entre .NET, PHP ó JSP) fué que se separaba código de diseño y yo me enfocaba en lo mio y el diseñador/maquetador en lo suyo.
    Esto es volver para atrás.

    • Hola Francisco,

      En primer lugar, muchas gracias por tu comentario. Lo que si me gustaría recalcar es que ASP.NET MVC no excluye en absoluto a Web Forms, simplemente es una forma alternativa de trabajar. Lo que si que es cierto es que las aplicaciones que buscan el modelo MVC tienen una ventaja mayor en el control del código que se renderiza, cosa que perdimos hace tiempo con los controles ASP.NET. En muchos casos es posible que necesitemos un código más limpio y sobre todo que cumpla con las reglas de accesibilidad (sobre todo en administraciones públicas es muy común). Por otro lado, la forma de trabajo cambia ya que las capas están mucho más marcadas, aunque hace tiempo se intentó con el Modelo Vista Presentador y Web Forms pero, al menos en mi experiencia laboral, no se consiguió tan buen resultado como en el caso de MVC.
      No te quiero convencer de nada, tu opinión es bienvenida como la del resto :D pero creo que hay que estar abiertos a nuevas formas de trabajo y que obviamente cada una tiene su parte buena y… menos buena ;)

      ¡Saludos!

  5. Hola amigos los agradesco por este post, mira amigos yo resien estoy empezando a investigar sobre asp.net mvc 3 , pero me encuentro confundido, como utilizaria ajax control toolkit,pasar datos a un controlador, no se si me pueden ayudar con una explicacion y si tendrian un tutorial lo agradeceria mucho, Gracias.

    • Hola jzamora,

      Gracias por tu comentario :) Se puede conseguir igualmente pero hace falta mayores nociones del renderizado de una web. Desde hace bastante tiempo, los proyectos que estoy llevando a cabo los realizo con ASP.NET MVC y obtengo tan buenos resultados como con Web Forms, además de un mayor control sobre el código que genero :D

      ¡Saludos!

  6. Compartido por Que es cshtml? | dokkillo.in

  7. Hola me parece bueno tu post me clara algunas dudas, yo estoy trabajando con la vercion 4 de mvc y aun tengo algunas dudas sobre donde debo dejar la parte html porque la parte de lógica del negocio si la entiendo, ya estaba muy acostumbrado a la parte html/php y esto se me pone algo algo confuso quiero implementar un acordeon y el codigo html por si solo corre, le pongo las librerias en la vista ya en .net y no corre XD y es ahi donde me trabo si pudieras orientarme un poco mas te agradeceria.

    saludos.

Deja un comentario