En este artículo veremos como utilizar Razor y algunos ejemplos. Esta es una continuación de un tutorial MVC .Net, todos los artículos del tutorial aparecerán aquí, aunque si solo quieres ver Razor esto te sirve.
Situemonos
En .NET salio ASP que tenía controles de servidor. Eran del estilo < asp:label /> y se podían combinar con controles de HTML. Por debajo ponía una clase de vb/c# para controlar los eventos de estos controles. Esto era lento y había eventos que refrescaban la página y te hacían perder la información. Después salió ASP MVC donde no hay ningún control de ASP propio, solo html o código que genera html. Este código que genera HTML se usa con el < %:, pero tiene el mismo inconveniente que PHP, cada vez que lo quieres utilizar tienes que abrir y cerrar tags. Después salio Razor con MVC 3 y la sintaxis cambió bastante. Con Razor tienes que poner @ para escribir código y el ya deduce cuando acaba. Aparte de no tener que estar abriendo y cerrando código, tiene la ventaja de que queda más limpio el código.
La sintaxis es, básicamente, de 2 formas:
– @Parametro/instruccion (ejemplo: @Model.Nombre), ponemos una arroba y lo que queremos que salga por pantalla
– @{}, esto es para hacer trozos de código que no devuelven texto HTML. Por ejemplo, cuando creamos una View tenemos lo siguiente:
@{
ViewBag.Title = "Libro";
}
Esto introduce en el ViewBag una propiedad con un valor, pero no lo muestra por pantalla.
[spoiler intro=»Nota»]Instrucciones como el foreach para recorrer una lista y mostrarla, serian de tipo @Parametro/instruccion porque esperamos que devuelva código HTML:
<table>
<thead><tr><td>Nombre</td><td>Descripcion</td></tr></thead>
<tbody>
@foreach (var lib in Model)
{
<tr><td>@lib.Nombre</td><td>@lib.Descripcion</td></tr>
}
</tbody>
</table>
Algunos ejemplos
No voy a explicar cada una de las mejoras, pero podemos ver unos ejempos de uso básicos y conforme vayamos avanzando (y necesitando más «chicha») iremos viendo mas ejemplos :).
Mostrar una collection
Para mostrar una collection utilizaremos un foreach, vamos a seguir con el ejemplo de los libros ( el objeto libro tiene 2 propiedades: Nombre y Descripcion) y quedará tal que:
@model List<NOMBRE_PROYECTO.Models.Libro>
<table>
<thead><tr><td>Nombre</td><td>Descripcion</td></tr></thead>
<tbody>
@foreach (var lib in Model)
{
<tr><td>@lib.Nombre</td><td>@lib.Descripcion</td></tr>
}
</tbody>
</table>
La función del controller nos devuelve un List< NOMBRE_PROYECTO.Models.Libro>, le indicamos a Razor que ese será nuestro ViewModel (para que esté tipado).
Siempre, en el bloque de código del foreach (entre {}) tiene que empezar con un «< « para que no interprete que es código Razor. Si ponemos directamente texto, tendremos que ponerle un < span> o < text>.
Aparte del foreach, tienes el for, if, …. solo lo he usado de ejemplo.
Helpers
Son trozos de código que te ayudan (como su propio nombre indica :)) a hacer acciones o mostrar elementos que con html quizás no te baste. Por ejemplo si desplegas un proyecto y tienes una redireccion, seguramente no coincidirá la url.
Redirecciones
Ahora, en lugar de utilizar el típico < a href, podemos utilizar Razor. Esto tiene un porqué y es porque una vez desplegas la aplicación puede variar la URL, y con Razor te lo hace solo.
Para ello tenemos que utilizarlo así (Normalmente):
@Html.ActionLink(texto, funcion/accion) @Html.ActionLink(texto, funcion/accion, controlador)
Por ejemplo, en nuestro controller de Libros, si queremos ir a la función Index seria:
@Html.ActionLink("esto es un link", "Index", "Libros")
Elementos de HTML
También tenemos elementos (tipo textbox, botones, …) en Razor para ayudarnos, como lo siguiente:
@Html.TextBox(NombreBotón, Valor, AtributosHTML)
Valor y AtributosHTML son opcionales. Los atributos se los puedes pasar en un diccionario clave-valor o con un objeto. Por ejemplo:
@Html.TextBox("txtNombre", "Introduce un nombre", new { @class = "miClase" })
Os habreis fijado que @Html.TextBox hay 2, esto porque el @Html.TextBox es el TextBox normal y el @Html.TextBoxFor() es en el que le indicamos una propiedad del modelo para que lo asocie:
@Html.TextBoxFor(LinQ)
Si tuviesemos un solo objeto (no un listado):
@Html.TextBoxFor(m => m.Nombre)
Pero teniendo una collection (por ejemplo la de libros, que tiene 2 propiedades: Nombre y Descripcion) tendríamos que hacerlo así:
@for (var i = 0; i <Model.Count(); i++ )
{
<div>
<h2>@Html.TextBoxFor(m => m.ElementAt(i).Nombre) - @Html.TextBoxFor(m => m.ElementAt(i).Descripcion) </h2>
</div>
}
Hay varios helpers como display para mostrar,BeginForm y EndForm para abrir y cerrar un formulario (los tags), checkbox, dropdownlist, … Si queréis ver que elementos podéis utilizar solo tenéis que poner @HTML. y el intelisense de VS te mostrará las posibilidades.
Modificar lo que enseñas
Aparte de poder enseñar el ViewModel, puedes hacer funciones para utilizarlo como tus helpers.
Me explico… supongamos que tenemos una grid con una de las columnas que el texto ( en según que filas ) es demasiado grande y provoca que algunas filas puedan estar en 2 lineas. Podríamos crear una función que nos imprimiese el texto con «…»
Creamos la función por el principio de la página:
@helper recorta(string input, int length)
{
if (input.Length < = length) {
@input
} else {
@input.Substring(0, length)< text>...< /text>
}
}
Y la página:
<table>
<thead><tr><td>Nombre</td><td>Descripcion</td></tr></thead>
<tbody>
@foreach (var lib in Model)
{
<tr><td>@recorta(lib.Nombre, 3)</td><td>@recorta(lib.Descripcion, 10)</td></tr>
}
</tbody>
</table>
De esta manera recortaría los textos y los haría presentables. Y esto es todo por hoy!! En el siguiente veremos como hacer un alta de libros, pasando un ViewModel del Controller a la vista y mostrándolo con Razor.