Sintaxis básica de Razor

En este capítulo, exploraremos todos los conceptos básicos de la sintaxis de Razor

La cosa más básica que puedes hacer con la sintaxis de Razor es accesar algo del lado del servidor mediante un prefijo aplicado a una variable o nombre de función con un @(Arroba). Vimos un par de ejemplos de esto en capítulos previos, donde podemos simplemente mezclar HTML, texto y variables del lado del servidor todo junto así:

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

La expresión de arriba muestra texto, mezclado con la variable name (debe estar declarado en otro lugar) y luego acceder a la fecha actual de la propiedadNow de la clase DateTime, y gracias a la simple sintaxis, el código luce, de hecho, muy sencillo de leer.

Pero el prefijo @ no es solo para accesar simples variables o propiedades de una clase. Puede ser usado para muchas otras cosas en Razor, incluyendo sentencias de control, bloques de código, comentarios y mucho mas, como verás en los siguientes ejemplos.

Codificación HTML

Debes estar atento a que cuando usas las expresiones implícitas de la sintaxis de Razor mostradas arriba, la salida sera automáticamente HTML codificado. Este es el comportamiento que quieres, pero en algunos casos, tu querrás poder mostrar HTML y que sea interpretado por el explorador en lugar de que se muestre como salida. Para esto, puedes usar el método Raw()de la clase Html y aquí hay un ejemplo donde puedes apreciar la diferencia:

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

El resultado se verá como esto, donde puedes ver que en la primera linea, el HTML en la cadena esta mostrado como texto (ha sido codificado a HTML), mientras la segunda línea es interpretada y por ende haciendo el texto en negritas.

<b>Hello, world!</b>

Hello, world!

Expresiones explícitas

En el primero ejemplo de arriba, usamos la llamada expresión implícita, pero algunas situaciones claman mas por una variante explícita, para mostrarle al parser exactamente cuales son tus intenciones. Razor viene con una sintaxis de expresión explícita justo para esas situaciones y básicamente se trata de encerrar tu expresión con un par de paréntesis. Esto hace mas fácil al parser entender que estas haciendo, y permite hacer cosas como cálculos o modificaciones dentro de una expresión Razor.

Aquí un ejemplo:

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

Nota la sintaxis, donde el carácter @ es seguido por un par de paréntesis. Lo usamos dos veces, la primera para accesar al método Substring en la variable string, y luego para aplicar un poco de matemáticas directamente dentro de la expresión Razor. La salida resultante se ve así:

Hello, John. Your age is: 42.

Bloques de múltiple declaración de Razor

Sí necesitas hacer mas que simplemente accesar por ejemplo, a una variable, Razor te permite entrar un bloque de código multilínea agregando una llave (" { ") después del operador @. Aquí un ejemplo:

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

Nota como puedo escribir código C# dentro del bloque de código, incluyendo ciclos, enunciados condicionales y todo lo demas que estas acostumbrado del lenguaje de C#. Una diferencia importante es que tienes que tener llaves alrededor de los enunciados de control dentro de bloques de código, incluso sí solamente ocupan una línea, de otra forma confundirán al parser.

También nota como puedo definir un a variable dentro del bloque de código, modificarla sí es necesario, y ¡luego usarla fuera del bloque de código!

Etiquetas HTML y texto plano dentro de bloques de código

Cuando estas dentro de un bloque de código, como el que está mostrado en el ejemplo de arriba, puedes aun necesitar mostrar texto, lo cual es bastante normal. Pero en vez de forzarte a entrar y salir entre bloques de código, Razor te permite mezclar etiquetas HTML directamente en bloques de código, como esto:

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

Razor simplemente ve tus etiquetas HTML y asume que ahora estas expresando un marcado como salida en vez de código para procesamiento. Pero ¿qué pasa si tu quieres envolver tu texto dentro de etiquetas? Razor tiene una opción para hacer esto también, usando el operador @: , de esta manera:

@:This is plain text!

Sí necesitas mas de una linea de texto plano, puedes abarcarlo con un par de etiquetas <texto> tags. Aquí se muestra un ejemplo mas completo, donde muestro ambas sintaxis:

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

¡Nota como ahora podemos mezclar código, HTML y texto plano muy fácil!

Comentarios del lado del servidor con Razor

Algunas veces podrás querer dejar comentarios en tu código, o comentar líneas de código temporalmente para probar cosas. Por lo tanto, la mayoría de lenguajes de programación incluyen una sintaxis para comentar tu código y así lo hace Razor. Tu puedes usar comentarios HTML, pero como todos sabemos, estos son mostrados en el explorador y pueden ser vistos si la opción "Vista fuente" es usada. Los comentarios Razor nunca son mostrados en el explorador y son simplemente ignorados cuando la página es parseada (analizada).

Aquí hay un ejemplo de como puedes tener un comentario Razor en tus vistas:

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

Si estas dentro de un bloque de código, puedes incluso usar comentarios estilo C#:

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

Resumen

Esta fue el material más básico que necesitas saber sobre Razor y debe ayudarte a empezar.