Post 10. Motor de vistas Razor (II)

En el post anterior, mostramos las bases para entender la sintaxis de razor, viendo principalmente ejemplos de sus componentes más importantes, en esta ocasión nos enfocaremos mas a las reglas de su sintaxis.

Inicio y Fin: @
A diferencia de aspx en el cual las etiquetas <% y %> delimitan el inicio y fin del código .net dentro de nuestra vista, en razor disponemos de la etiqueta @ la cual nos indica el inicio de nuestro código mas no disponemos de etiqueta de cierre. Pero esta etiqueta tiene varios formas de acuerdo al uso que queramos darle. Algunos de ellos ya los hemos visto, pero vamos a repasarlos.

@[Palabra Reservada]

Cuando usamos la etiqueta @ junto a una palabra reservada indicamos a razor que debemos usar un recurso no administrado (una conexión sql, una libreria de funciones, una clase, etc.). Notese que tampoco se usa el simbolo ";" para indicar el fin de la línea.

@using Microsoft.Class
@model Models.MiModelo

@[Variable]

Cuando usamos la etiqueta @ junto a una variable, indicamos que debemos mostrar el valor de la variable en nuestra vista.

@ViewData.["Mensaje"]
@Model.Nombre

@[Función]

Cuando usamos la etiqueta @ junto a una función, indicamos que debemos mostrar el valor devuelto por la función en nuestra vista.

@Html.TextBoxFor(m => m.Nombre)
@Model.Nombre.Substring(0,5)

@* Texto*@

Ya hemos visto este uso en el post anterior y es incluir comentarios en nuestra vista. Nótese que estos comentarios no generan código html (<!--Texto--> ) y solo son visibles desde el código fuente.

@*Esto es un comentario en razor*@

@[Estructura de Control]

Razor tambien tiene su propia sintaxis para las estructuras de control, muy parecidas a las usadas en .net, solo debemos agregar un @al inicio del control y el uso de llaves es obligatorio, así mismo el código dentro de las llaves debe tener la sintaxis normal de .net (usar ";", las variables y funciones no llevan @, etc. )

@if(Model.Nombre == "") { a++; }

@{Codigo .net}

Cuando usamos la etiqueta @ junto a llaves (inicio y cierre) indicamos a razor que debemos ejecutar código .net. En este caso se respetan toda la sintaxis de .net (igual que las estructuras de control).

@{int a = 0;}

<text></text>

En algunos casos deseamos incluir codigo razor dentro de nuestras llaves. En ese caso usaremos las etiquetas <text></text> para indicar a razor que ese bloque sera considerado texto html.

<select name="Ciudad">
@foreach (stringcadena in Model.Ubigeo) {
    <text><option value="@cadena">@cadena</option></text>
}
</select>

@:

Tiene la misma funcionalidad que las etiquetas <text></text>

<select name="Ciudad">
@foreach (stringcadena in Model.Ubigeo) {
    @:<option value="@cadena">@cadena</option>
}
</select>

@(valor)

En ciertos casos debemos tener cuidado para que razor interprete correctamente lo que queremos mostrar, por ejemplo el siguiente código

@{int a = 0;}
El valor de a es @a + 1

Se mostrará:

El valor de a es 0 + 1

Cuando lo que hubiéramos deseado es que se muestre un 1 y no un 0 + 1, esto sucede por la regla @[variable] en la que muestra el valor de @a puesto que + 1 es solo una cadena de html, si necesitamos que se muestre el mensaje El valor de a es 1, lo que debemos hacer es:

@{int a = 0;}
El valor de a es @(a + 1)

En este caso lo que le decimos a razor es que debemos mostrar el valor de a + 1 y no solo el valor de a.

@@

En el caso de que debamos mostrar un @ en nuestra vista, sólo bastará con agregar un @@, en nuestra vista solo se mostrará uno.

arangodj@@gmail.com

Estas son las reglas básicas para poder programar en razor, si hubiera alguna otra consideración se agregará en el post, deben tenerlas siempre presente para entender y probar los futuros ejemplos.

Seguir leyendo →