Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

18 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 21 de febrero de 2012
ASP.NET MVCPoquito a poco vamos conociendo algunas novedades que podemos encontrar en ASP.NET MVC 4 que, aunque no sean de gran calado, sí nos pueden resultar útiles en el día a día.

Hoy vamos a comentar dos pequeñas mejoras introducidas en el motor de vistas Razor, lo que implica que son aprovechables desde las futuras versiones tanto de MVC como de Webpages.

Interpretación directa de “el gusanillo” (~)

En versiones anteriores de Razor encontrábamos mucho código de este tipo cuando teníamos que referenciar un archivo de contenido estático en el sitio web:
    <link href="@Url.Content("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" />
    <script src="@Url.Content("~/scripts/jquery-1.6.2.min.js")"></script>
    ...
    <img src="@Url.Content("~/images/facebook.png")" alt="Facebook "/>
Ahora, con ASP.NET MVC 4 (y Webpages 2), Razor es capaz de detectar la secuencia “~/” en el valor de un atributo HTML, asume que se trata de una dirección relativa al raíz del sitio web, y genera automáticamente la dirección real en tiempo de ejecución. Por tanto, el código anterior podemos convertirlo en:
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="~/scripts/jquery-1.6.2.min.js"></script>
    ...
    <img src="~/images/facebook.png" alt="Facebook "/>
Observad que la limpieza del código es mucho mayor, podemos escribirlo más rápidamente, y en cualquiera de los casos el resultado enviado al navegador será el mismo:
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="/scripts/jquery-1.6.2.min.js"></script>
    ...
    <img src="/images/facebook.png" alt="Facebook "/>
Es importante tener en cuenta que en ningún caso se está evaluando la etiqueta, o se cuestiona si tiene sentido introducir una URL en el atributo. Simplemente detecta la secuencia y genera el resultado sin darle más vueltas. Por tanto, también funciona en un escenario como este:
    <span title="La dirección de la imagen es ~/images/facebook.png">Facebook</span>    
E incluso en el siguiente, aunque sólo si dejamos un espacio detrás del paréntesis (no sé si por diseño o simplemente es un bug):
    <div style="background-image: url( ~/images/facebook.png)">Facebook</div>    

Atributos condicionales

Un escenario bastante habitual que encontrábamos en versiones de ASP.NET MVC anteriores a la 4 era la generación de atributos HTML cuando se cumplía una condición determinada, que, más o menos, resolvíamos de la siguiente forma:
    foreach (var item in items)
    {
        var classAttr = item.Total > 0 ? "class='selected'" : "";
        <tr @Html.Raw(classAttr)>
                <td>@item.Name</td>
                <td>@item.Total</td>
        </tr>
    }
Bueno, en realidad hay miles de alternativas para hacer lo mismo, algunas incluso peores desde el punto de vista de la legibilidad del código:
    foreach (var item in items)
    {
        <tr @{ if(item.Total>0) {<text>class='selected'</text>}; }>
                <td>@item.Name</td>
                <td>@item.Total</td>
        </tr>
    }
En cualquier caso, como podéis adivinar, el atributo class='selected' se añade al tag <tr> únicamente cuando el valor de la propiedad Total cumple la condición indicada; en caso contrario, no se añadiría nada a esta etiqueta.

ASP.NET MVC 4 beta y, de nuevo, Webpages 2, ofrece la posibilidad de escribir este mismo código de forma más simple adoptando la siguiente convención: si en el interior de un atributo se intenta introducir un valor nulo, ni siquiera se renderiza el atributo. Es decir, podemos simplificar y mejorar ligeramente la legibilidad el código anterior así:
    foreach (var item in items)
    {
        var cssClass = item.Total > 0 ? "selected": null;
        <tr class="@cssClass">
                <td>@item.Name</td>
                <td>@item.Total</td>
        </tr>
    }
De esta forma, para los elementos cuyo Total sea mayor que cero, se generará un tag <tr class="selected">, mientras que para el resto, esa línea quedará en un <tr> sin más.

En fin, en ningún caso se trate de mejoras espectaculares, pero bueno, son pequeñas ayudas para que nuestro código en las vistas sea algo más limpio.

Seguiremos informando…

Publicado en: Variable not found.

Aún no hay comentarios, ¡sé el primero!