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 😀 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="https://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 😀

¡Saludos!

22 Responses to “Razor View Engine para ASP.NET MVC 3”

  1. […] This post was mentioned on Twitter by Edwin and Marlontaro, Gisela Torres. Gisela Torres said: Razor View Engine para ASP.NET MVC 3 http://bit.ly/grCujl #aspnetmvc #csharp #razor […]

  2. […] mapas dinámicos con una enorme cantidad de funciones. Además, para rizar más el rizo utilizaré ASP.NET MVC 3 con Razor para crear una llamada síncrona y otra asíncrona con la ayuda de […]

  3. Shuster dice:

    Hola, claro que es de utilidad.
    Saludos desde México

  4. jnux dice:

    ¿Qué si es de utilida? ¡Hombre, no lo ponga en duda jamás! ¡Que excelente POST!

    Saludos desde Colombia.

    Atte,
    jnux

  5. elperucho dice:

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

    Saludos y gracias por la aclaratoria.

  6. Francisco dice:

    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.

    • Gisela dice:

      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 😀 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!

  7. Idmir Levi dice:

    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.

  8. Idmir Levi dice:

    Hola aqui los dejo mi correo para poder compartir conocimientos.
    idmer_2812@hotmail.com

  9. jzamora dice:

    Con logro para crear hojas con diseño profesional sino dispongo de una parte de diseño como el motor de vista de ASPX.

    • Gisela dice:

      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 😀

      ¡Saludos!

  10. rodrigo dice:

    muy interesante el post…! seguí posteando que está muy bueno.

  11. Ascariz dice:

    Buenos dias.

    Hay alguna manera de hacer con en mvc3 los ASCX con programación???.

    gracias

  12. RaYnAuD dice:

    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