Más características de Razor con MVC 4 y Web Pages 2

 

ASP.NET MVCHace poco comentamos algunos detalles sobre las novedades que incluirá Razor 2, la versión que será incluida en ASP.NET MVC 4, y siguen apareciendo más novedades destinadas a mejorar la calidad del código y nuestra productividad al crear las vistas MVC o Web Pages.

En este post vamos a ver otros comportamientos de Razor en distintos escenarios.

Cerrado implícito de etiquetas

La versión anterior de Razor daba problemas con un código como el siguiente:

@if(passwordNeeded) 
{
    <input type="password" name="password">
}

La página no compila y genera una excepción en tiempo de ejecución debido a que la etiqueta <input> no se ha cerrado explícitamente usando la sintaxis de autocierre <input … /> o bien mediante el cierre de toda la vida </input>.

En Razor 2 se ha creado un parser mucho más complejo, en el que, entre otras cosas, se tienen en cuenta los llamados void elements por la W3C, que son aquellas etiquetas que en ningún caso pueden tener contenido: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track y wbr.

Cuando Razor se encuentra con alguna de estos elementos, si la etiqueta inmediatamente posterior no es la que lo cierra, asumirá que éste está cerrado de forma automática, por lo que el código mostrado anteriormente será válido.

Rutas con partes variables

Ya vimos que el nuevo Razor será capaz de interpretar el gusanillo (~) directamente, de forma que ya no será necesario utilizar esos verbosos @Url.Content() a la hora de referenciar recursos como scripts, imágenes u hojas de estilo:

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>

Pues bien, el caso es que las rutas especificadas de esta forma no tienen por qué ser una cadena constante, sino que pueden incluir variables, como en el siguiente ejemplo:

@{
    var scriptsFolder = "scripts";
}
<script type="text/javascript" src="~/@scriptsFolder/jquery-1.7.1.js"></script>

Lo que hace Razor en este caso es interpretar y obtener la dirección teniendo en cuenta desde el gusanillo hasta la primera barra, insertar el contenido de la variable, y seguirlo del resto de la cadena constante. El equivalente con la versión anterior (MVC3) de Razor sería algo así:

<script type="text/javascript" src="@Url.Content("~/")@scriptsFolder/jquery-1.7.1.js"></script>

Atributos condicionales con varios valores

También vimos en el post anterior que cuando Razor 2 tenía que generar el contenido de un atributo cuyo valor era null, no generaba ni si quiera el nombre del atributo, lo que al final se traducía en un código más sencillo y compacto:

@{
    string nullValue = null;
    string stringValue = "hello";
}
<span class="@nullValue" id="@stringValue"></span>
 
GENERA:
<span id="hello"></span>

Pues bien, este comportamiento funciona incluso cuando en el atributo aparecen valores procedentes de más de una expresión. Aquellas cuyos valores sean nulos no serán generadas (ni siquiera el espacio en blanco que la separa de las demás), y si todas ellas son nulas el atributo no será generado:

@{
    string nullValue = null;
    string stringValue = "hello";
    string otherNull = null;
}
<span class="@nullValue @stringValue @otherNull"></span>
<span class="@nullValue @otherNull"></span>
 
GENERA:
<span class="hello"></span>
<span></span>

Tratamiento de atributos booleanos

Otro detalle muy interesante lo tenemos al escribir valores para atributos booleanos, como disabled, checked o similares. Lo habitual en la versión 1 de Razor para generar apropiadamente estos atributos era hacer algo así:

@{
    string disabled = "";
    if(condition)
    {
        disabled = "disabled='disabled'";
    }
}
<button @Html.Raw(disabled)>Click!</button>

GENERA (dependiendo del valor de condition):
<button >Click!</button>                
<button disabled="disabled">Click!</button>                

La nueva versión de Razor permite ser mucho más directo y explícito en estos casos. Introducimos directamente el booleano como valor del atributo; si es true, el valor del atributo será su mismo nombre, mientras que si es false el atributo no será renderizado:

<button disabled="@condition">Click!</button>

GENERA (dependiendo del valor de condition):
<button>Click!</button>                
<button disabled="disabled">Click!</button>                

Y eso es todo de momento. Seguiremos atentos a las novedades e iremos contándolas por aquí, como de costumbre 🙂

Publicado en Variable not found.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *