¿Qué es Razor?

Razor es una sintaxis de programación ASP.NET utilizada para crear páginas web dinámicas con los lenguajes de programación C # o Visual Basic .NET. Razor estaba en desarrollo en junio de 2010 y se lanzó para Microsoft Visual Studio 2010 en enero de 2011. Razor es un motor de visualización de sintaxis simple y se lanzó como parte de MVC 3 y del conjunto de herramientas WebMatrix.

RAZOR nos ayuda a mezclar código de cliente en código de servidor.

Se puede utilizar de dos modos:

  • Incrustado en MVC
  • En una webpages donde no tenemos MVC, se coloca una página en código RAZOR que devuelve un resultado.

 

PRINCIPALES CARACTERISTICAS DE RAZOR

  • Compacto, expresivo y fluido: Razor minimiza el número de caracteres y las pulsaciones de teclas requeridas en un archivo, y permite un flujo de trabajo de codificación rápido y fluido. A diferencia de la mayoría de las sintaxis de plantillas, no necesita interrumpir su codificación para indicar explícitamente los bloques de servidor dentro de su HTML. El analizador es lo suficientemente inteligente como para inferir esto de tu código. Esto permite una sintaxis muy compacta y expresiva que es limpia, rápida y divertida de escribir.
  • Fácil de aprender: Razor es fácil de aprender nos permite ser productivos rápidamente con un mínimo de conceptos. Usar todas tus habilidades de lenguaje y HTML existentes.
  • No es un lenguaje nuevo: Permite a los desarrolladores usar sus habilidades de lenguaje existentes C # / VB (u otras) con Razor, y ofrecer una sintaxis de marcado de plantilla que permite un impresionante flujo de trabajo de construcción de HTML con el idioma de su elección.
  • Funciona con cualquier editor de texto: Razor no requiere una herramienta específica y le permite ser productivo en cualquier editor de texto simple.
  • Tiene un gran Intellisense: aunque Razor ha sido diseñado para no requerir una herramienta específica o un editor de código, contará con una excelente compatibilidad para completar sentencias dentro de Visual Studio.
  • Unidad comprobable: la implementación del nuevo motor de vista admitirá la capacidad de probar vistas de unidad (sin requerir un controlador o servidor web, y puede alojarse en cualquier proyecto de prueba de unidad, no se requiere un dominio de aplicación especial).

 

 Ejemplos con Razor Incrustado en MVC

1.”HOLA MUNDO”

Previamente en el controlador de la vista declaramos una variable Viewbag donde escribimos nuestro mensaje “Hola mundo”, que tendremos disponible en nuestra vista, con el consecuente ahorro de puslaciones en el momento de introducir el mensaje.

Imagen2

En nuesta pagina con extension cshtml inyectamos nuestro codigo Razor, es decir, esta página reconoce código C#.Como se puede ver para el inicio de un bloque Razor se usa el carácter @.

En este ejemplo mostramos un mensaje y utilizamos la clase DateTime con Razor para obtener el año actual, en segunda instancia creamos un enlace usando html.

Imagen1

Este es el resultado final:

Imagen3

2.Usando Razor con el modelo

Veamos otro escenario simple en el que queremos mostrar un jugador, su posición y dorsal:
DETALLES_JUGADOR

Para ello previamente he creado una base de datos con SQL y utilizo Entity Framework para trabajar con ella . Las consultas a la tabla se harán con LINQ, la tabla será transformada a objeto que a su vez podrá ser tratada con Razor en la vista.
En este caso la consulta solo devolverá el primer elemento de la tabla, en el siguiente ejemplo veremos como cargar una lista.

El objetivo de este ejemplo es ver como podemos a través del modelo y Razor conseguir las propiedades del objeto (en este caso MADRID)  y de ver como combinar Razor en una lista desordenada en HTLM.

En primer lugar hago la consulta en el la clase ModeloPlantilla
Esta consulta devolveá el primer elemento de la lista.
Consulta_Jugador

En siguiente lugar en el controlador utilizo esta consulta y devuelvo un objeto MADRID en el que estará nuestro elemento consultado
OBJETO_MADRID

Ahora es cuando vamos a ver como en la vista gracias a Moldel y Razor podemos recuperar las propiedades del objeto MADRID de forma fácil y combinandola con una lista HTML. Recordar que cuando empezamos con @ estamos utilizando sintaxis Razor, en el momento que utilizamos código HTML, Razor “se corta” teniendo que volver a usar @ para poder volver a usarlo.
En primer lugar con: @model EjemploRazor.Models.MADRID; recuperamos el objeto MADRID que llega desde el controlador.(@model en minuscula recupera, con @Model accedemos a las propiedades)
A continuación utilizamos código HTML para dar estructura a nuestra Vista y en el momento de rellenar la lista recuperamos las propiedades del objeto con Razor.(@Model.DORSAL).
En momento de escribir @Model. veriamos todas las propiedades que contiene el objeto.

DETALLES_JUGADOR_VISTA

3.Loops y muestra HTML anidada

En este ejemplo cargaremos unas lista medinte un foreach usando Razor, como se puede ver es igual que cualquier otro foreach.

Plantilla_Ejemplo4

Como podreis ver este ejemplo es  practicamente igual anterior pero recibiendo en el modelo una lista de objetos que posteriormente pasaremos a recorrer con un foreach.

Foreach_Ejemplo3

Podemos observar arriba cómo comenzamos un ciclo “foreach” usando el símbolo @, y luego contenie una línea de contenido HTML con bloques de código dentro de él. Debido a que el analizador Razor entiende la semántica de C # en nuestro bloque de código, fue capaz de determinar que el contenido <td> debería estar contenido dentro del foreach y ser tratado como el contenido que debería enlazarse. También reconoció que al final finalizó la instrucción foreach.

Razor también fue lo suficientemente inteligente como para identificar la sentencia @ jugador.propiedades y  ejecutarla cada vez a través del ciclo además de cerrar automáticamente los bloques de código @jugador.propiedades.

La capacidad de codificar de esta manera sin tener que agregar muchos marcadores de abrir / cerrar en todas las plantillas hace que todo el proceso de codificación sea realmente fluido y rápido.

Ahora bien,tambien se pueden introducir sentecias de control. En este mismo ejemplo voy a introducir un if.

if_ejemplo3bis

La estructura de control es simple, pero el objetivo del ejemplo es ver como no hay ninguna diferencia a la hora de realizar una sentecia de control.

if_ejemplo3

4.EJEMPLO AUTOMATISMO

En este ejemplo usaré una herramienta que nos proporiciona Visual Studio a la hora de crear plantillas automaticamente donde Razor tiene su protagonismo.

Hemos visto como pasar un objeto o una lista de objetos y como mostrar  o recorrerlos. Ahora bien esto se puede automatizar de la siguiente manera.
Sobre el nombre que le hemos dado a nuestro ActionResult elegimos en este caso, que queremos agregar una lista de objetos MADRID a la Vista.

Ejemplo4_1

De esta forma Visual Studio crea una plantilla por nosotros y gracias a la ayuda de  Razor y las expresiones Lambda.

Ejemplo4

Al final podemos ver @HTML.ActionLink, es una de las tantas opciones que hay en Razor para poder ayurdarnos a que nuestro codigo en HTML sea más robusto. En este caso en concreto es para crear enlaces por los cuales podremos pasar parámetros de manera mas segura. El primer campo se refiere al texto que va a tener el enlace, segundo sera la vista a donde queremos enviar al ususario y lo que esta entre llaves es donde podemos pasar los parámetros que nos convengan. Una vez más para ello utilizaremos Razor.

Ejemplo4_3

Como podemos ver recogemos el número de dorsal del jugador pulsado en el link.

Ejemplo4_4

Al pulsar en Detalles Jugador recogemos el parámetro que hemos definido, este parámetro lo enviamos al controlador de la vista, donde ejecutamos un método que previamente ha sido definido en la clase ModeloPlantilla, que utiliza el parámetro.

Ejemplo_4_5

Una vez aqui creamos nuestra vista de forma automática como hicimos al principio solo que esta vez no será una colección de objetos sino un solo objeto.
En las siguientes imágenes muestro el resultado de la Vista y el resultado Web de la misma.
Ejemplo4_6

Ejemplo4_7

CONCLUSIÓN

“Razor” proporciona una excelente nueva opción de motor de visualización que se optimiza para la creación de plantillas centradas en el código. Es un flujo de trabajo de codificación que es rápido, expresivo y divertido. Su sintaxis es compacta y reduce el tipeo, mientras que al mismo tiempo mejora la legibilidad general de su marcado y código.

 

Autor/a:Juan Aguado Aranda

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2017-2018

Otros datos de interés: ENLACE A GIT HUB