ASP.NET MVC 3: Nuggets de Razor implícitos y explícitios

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 el tag text
• ASP.NET MVC 3: Nuggets de Razor implícitos y explícitios (hoy)

En este post veremos cómo definir nuggets de código para Razor tanto implícitos como explícitos para nuestras vistas, y veremos algunos ejemplos.

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, el siguiente snippet de Razor puede usarse para iterar sobre una colección de productos y devolver una salida con <ul> una lista de nombres de productos que se enlazan con la página del producto directamente:

Cuando lo ejecutamos, obtenemos el siguiente código generado:

Fijáos cómo hemos sido capaces de embeber dos nuggets de código en el contenido del bucle foreach. Uno de ellos devuelve el nombre del producto, y el otro embebe el ProductID en un hiper enlace. Fijáos que no hemos tenido que envolver los nuggets explícitamente – Razor es lo suficientemente inteligente como para identificar donde empieza lel código y dónde termina en ambas situacioens.

Cómo permite Razor nuggets de código implícitos.

Razor no define su propio lenguaje. Sino que el código que escribimos en los nuggets de Razor es código estándar de C#o VB. Esto nos permite aprovechar nuestro conocimiento de esos lenguajes, así no tenemos que aprender una gramática nueva.

El parser de Razor  es lo suficientemente inteligente como para que no tengamos que marcar explícitamente dónde termina el código C#/VB que escribamos. Esto hace que la programación sea más fluida y productiva, y permite una sintaxis limpia, clara y concisa. Vamos a ver algunos escenarios que soporta Razor cuando podemos evitar marcar explícitamente el comienzo y el fin de un código, y dejamos que Razor lo identifique implicitamente por nosotros.

Acceso a propiedades

Razor nos permite acceder a valores de variables, o a propiedades de una variable referenciada con la notación del “punto”:

También podemos usar el “punto” para acceder a propiedades con varios niveles de profundidad:

Acceso a Arrays/Colecciones

Razor nos permite acceder a colecciones y arrays:

Llamadas a métodos

Razor también nos permite llamar a métodos:

Fijáos que en todos los escenarios no hemos tenido que indicar explicitamente el final del código. Razor fué capaz de identificar el final del bloque de código por nosotros.

Algoritmo de parseo de Razor para nuggets de código.

El siguiente algoritmo muestra la lógica principal que usamos para el soporte de expresiones “@” en Razor, y para permitir los escenarios anteriores:

1. Parsear un identificador – Tan pronto como vemos un carácter que no es válido en C# o VB, paramos y vamos al paso 2.

2. Comprobar paréntesis – Si vemos un “(” o “[” pasamos al paso 2.1, en otro caso vamos al paso 3.

2.1 Parseamos hasta encontrar el siguiente “)” o “]” (hacemos un seguimiento de los “()” y “[]” anidados e ignoramos los “()[]” que vemos en strings o comentarios).

2.2 Volvemos al paso 2.

1. Buscamos un “.” – si vemos uno, vamos al paso 3.1, en otro caso NO ACEPTAMOS EL “.” como código y vamos al paso 4.

3.1 Si el carácter despues del “.” es un identificador válido, aceptamos el “.” y vamos al paso 1, en otro caso vamos al paso 4.

1. Fin.

Diferenciando entre código y contenido.

El paso 3.1 es una parte particularmente interesante del algoritmo anterior, y permite a Razor diferenciar entre escenarios en los que un identificador está siendo usado como parte de una sentencia de código, y cuándo debería ser tratado como contenido estático:

Fijáos cómo el snippet anterior tenemos los caracteres ? y ! al final del código. Estos son identificadores válidos de C# – pero Razor es capaz de identificar que deberían tratarse como un string  del contenido estático y no como una expresión de código porque no hay espacios en blanco tras ellos. Esto es muy chulo y nos ahorra muchas pulsaciones de teclas.

Código explícito en Razor

Razor es los suficientemente listo como par aidentificar implícitamente un montón de escenarios. Pero hay veces en los que queremos/necesitamos ser más explícitos indicar el ámbito de aplicación de la expresión de código. La sintaxis @(Expresión) nos permite hacer esto:

Podemos escribir la sentencia C#/VB que queramos con la sintaxis @(). Razor tratará los caracteres dentro de () como código. Aquí tenéis unos escenarios en los que podemos usarlo:

Realizar cálculos aritméticos

Podemos realizar cálculos aritméticos con esta sintaxis:

Añadir texto al resultado de una expresión de código:

Podemos usar esta sintaxis para añadir texto estático al final de un codigo sin tener que preocuparnos sobre si se parseará como código:

En el código anterior hemos embebido un código dentro del atributo src de un elemento <img>. Nos permite enlazar imágenes con urls como “/Images/Beverages.jpg”. Sin tener los paréntesis explícitos, Razor buscaría una propiedad llamada “.jpg” (y lanzaría un error). De esta manera indicamos claramente dónde termina el código y dónde empieza el texto.

Uso de Generics y Lambdas

Las expresioens explícitas también nos permite usar tipos genéricos y métodos genéricos en nuestras expresioens, y nos permite evitar el uso de caracteres <> generics de forma no ambigua con los elementos tag.

Una cosa más … Intllisense en los Atributos

Hemos usado código en atributos HTML en varios ejemplos. Una característica muy buena del editor de código de Razor en Visual Studio es la habilidad de tener el intellisense de C#/VB cuando lo usamos.

Aqui tenéis un ejemplo de una sentencia en C# con intellisense y un código implícito en un atributo <a> href””:

Aquí tenéis un ejemplo del intellisense de C# usando un un código explícito en la propiedad src de un elemento <img>:

Fijáos que tenemos el intellisense completo en ambos escenarios – a pesar de que ambas expresiones están embebidas en un atributo de un elemento HTML (algo que el editor de código .aspx no soporta). Esto hace que escribir código sea aún más fácil y rápido, teniendo todas las ventajas del intellisense en todas partes.

Resúmen

Razor nos permite una sintaxis limpia y concisa que nos permiten un flujo de programación más fluido. La habilidad de Razor de detectar sentencias de código reduce la cantidad de pulsaciones que tenemos que hacer, y nos deja un codigo muy limpio.

Cuando sea necesario, también podemos indicar explícitamente sentencias de código usando la sintaxis @(expresion) para dar más claridad a nuestras intenciones, así como eliminar la ambiguiedad en sentencias de código con el markup estático.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.