TUTORIAL RAZOR
¿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.
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.
Este es el resultado final:
2.Usando Razor con el modelo
Veamos otro escenario simple en el que queremos mostrar un jugador, su posición y dorsal:
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.
En siguiente lugar en el controlador utilizo esta consulta y devuelvo un objeto MADRID en el que estará nuestro elemento consultado
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.
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.
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.
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.
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.
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.
De esta forma Visual Studio crea una plantilla por nosotros y gracias a la ayuda de Razor y las expresiones Lambda.
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.
Como podemos ver recogemos el número de dorsal del jugador pulsado en el link.
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.
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.
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