ASP.NET MVC 3: Sintaxis de Razor @: y el tag text

Este es otro post de una serie que estoy haciendo sobre algunas características sobre ASP.NET MVC 3:

• ASP.NET MVC 3: Nueva palabra reservada @model (20-Octubre)
• ASP.NET MVC 3: Layouts con Razor (24-Octubre)
• ASP.NET MVC 3: Comentarios de Servidor con Razor (15-Noviembre)
• ASP.NET MVC 3: Sintaxis de Razor @: y <text> (hoy)

En el post de hoy hablaraemos sobre lo útiles que son las características de sintaxis del motor de vistas Razor – el soporte de sintaxis @: y <text>

Programación fluida con Razor

ASP.NET MVC 3 viene con el motor de vistas opcional llamado “Razor” (a parte del ya existente para vistas .aspx). Podéis aprender más sobre Razor, porqué lo hemos introducido, y la sintaxis que soporta en mi post de introducción a Razor.

Razor minimiza el número de pulsaciones de teclas necesarias para crear una vista, y permite un flujo de desarrolo rápido y fluido. Al contrario que con otras sintaxis, no tenemos que interrumpir nuestro ritmo de programación para indicar explícitamente el comienzo y el final de un bloque de servidor en nuestro HTML. El parser de Razor es lo suficientemente listo como para inferirlo del código. Esto nos permite una sintaxis más compacta y expresiva convirtiéndola en limpia, rápida y divertida de escribir.

Por ejemplo, podemos usar el siguiente snippet de Razor para iterar sobre una lista de productos:

Cuando lo ejecutamos genera la siguiente salida:

Una de las técnicas que usa Razor para identificar implicitamente cuándo termina un bloque de código es buscar un tag que denote el principio de una región contenedora. Por ejemplo, en el snippet anterior Razor trató automáticamente el bloque <li></li> con el foreach como un contenido HTML porque vió el tag <li> y vío que lo que le seguía no era código C# válido.

Esta técnica particular – usando tags para definir bloques con código – es uno de los principales ingredientes que hace a Razro tan limpio y productivo en escenarios en loss que es necesaria la creación de HTML.

Usando @: para indicar explicitamente el comienzo de un bloque contenido.

No todos los contenedores comienzan con un tag, y hay escenarios en los que el parser de Razor no es capaz de detectarlo implicitamente.

Razor solventa esto permitiéndonos indicar explícitamente el comienzo de una linea usando la secuencia de caractéres @:. Esto le indica que la linea que sigue debe ser tratado como un bloque de código:

Como un ejemplo más práctico veamos un ejemplo, el siguiente código muestra cómo podemos mostrar el mensaje “(Out of Stock!)” al lado del nombre del producto si el producto no está en stock:

Como no estamos mostrando el mensaje (Out of Stock!) en un elemento con tag de HTML, Razor no puede determinar que el contenido del bloque @if es el comienzo de un bloque de contenido. Usamos los caracteres @: para indicar que explícitamente que esa liniea de nuestro bloque de código debe tratarse como contenido.

Uso de Nuggets en bloques @:

Además de devolver contenido estático, también podemos tener nuggets de código embebido en un bloque de contenido que se inicia con los caracteres @:.

Por ejemplo, tenemos dos secuencias @: en el siguiente código:

Fijáos que en la segunda @: estamos emitiendo el número de unidades que quedan del producto (por ejemplo: (Only 3 left)). Esto lo hacemos embebiendo el nugget @p.UnitsInStock en la linea de contenido.

Múltiples líneas de contenido

Razor hace fácil poder tener varias líneas de contenido en un mismo elemento HTML. Por ejemplo, en el siguiente ejemplo el contenido del @if está dentro de un elemento <p> de HTML – lo que hace que Razor lo trate como contenido:

En escenarios en los que necesitamos varias líneas de contenido que no estén dentro de un elemento HTML, podemos usar varias veces los caractéres @:

Además, también podríamos usar un elemento <text> para identificar explícitamente el contenido a Razor:

El tag <text> es un elemento tratado especialmente por Razor. Hace que Razor interprete el contenido de un bloque <text> como contenido, y no lo renderizará (es decir sólo renderizara el contenido, y no se mostratrá el tag). Esto es muy útil cuando queremos renderizar bloques de contenido de varias lineas para que no se muestren en un elemento HTML.

El elemento <text> también se puede usar para denotar una sola línea de contenido:

El código anterior renderizará la misma salida que la versión anterior con @:. Razor omitirá automáticamente el tag <text> de la salida y renderizará el contenido.

Resúmen.

Razor nos permite una sintaxis más clara y concisa que permite un flujo de desarrollo más fluido. La detección inteligente de Razor de elementos <tag> para identificar el comienzo de las regiones a renderizar es una de las razones  por las que la solución de Razor funciona tan bien en escenarios de generación de HTML, y nos evita tener que marcar explícitamente el comienzo y el fin de estas regiones en aproximadamente el 95% de los escenarios con if/eles y foreach.

La sintaxis de RAzor @:  y <text> puede usarse en escenarios en los que queramos evitar usar elementos HTML con un bloque de código, y necesitemos indicar explícitamente el contenido de una región.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.