Reto Razor: Sintaxis de WebMatrix y vistas de ASP.NET MVC

Con la aparición de WebMatrix, se presentó la sintaxis Razor para los sitios web, que posteriormente fue incorporada como motor de vistas en ASP.NET MVC. La principal diferencia de Razor con otras sintaxis/motores con más tradición dentro de ASP.NET es la facilidad y limpieza con la que se intercala código HTML y código de servidor.

Nota: Razor puede utilizarse para C# ( archivos .cshtml) o para vb ( archivos .vbhtml). En este artículo vamos a ver sólo la parte de cshtml

Además de revisar las principales características, os vamos a plantear un ejercicio donde tendréis que desarrollar un formulario en Razor.

¡Herramientas!

Para seguir el laboratorio y hacer el reto que os proponemos, necesitaras algunas herramientas, nada muy complicado, pero sin ellas va a ser difícil que lo sigas! :)

WebMatrix . WebMatrix es un pack de herramientas en una única descarga… editor, base de datos, servidor Web… que vale tanto para desarrollar, como para descargar e instalar conocidos paquetes web (Wordpress, Joomla, motores de blog, screwturnwiki…)

 

Si surge cualquier duda o complicación, no dudes en añadir un comentario a este post o comentárnoslo por twitter a @esmsdn o en el hashtag #retosmsdn

Espera… ¿Mezclar HTML y Código de servidor? ¡Spaghetti!

Muchos de los desarrolladores ASP.NET están acostumbrados a trabajar directamente con controles ASP.NET WebForms y en cuanto se menciona lo de mezclar código de presentación y lógica de negocio se llevan las manos a la cabeza y comienza una discusión sobre el antiguo ASP, el código spaghetti, las capas…

Dejemos claros algunos puntos

.NET no es ASP tradicional y no es comparable.

Si hay código de servidor mezclado con HTML, pero este código se dedica a temas de presentación y no a lidiar con el modelo ¿cuál es el problema?

Razor no es una verdad universal,  es una opción más… hay diferentes motores de presentación para diferentes preferencias (asp.net, razor, spark….)

Razor, como una opción más, tiene escenarios donde puede tener ventajas, como por ejemplo desarrolladores nóveles que vengan de PHP, JSP, ASP o que sean nuevos al desarrollo web.

 

antes de seguir… qué es ASP.NET Pages y qué tiene que ver?

Tal y como hemos comentado al abrir el post, Razor es tan solo una sintaxis, y aunque ahora este también incluida como motor de vistas en MVC3, recordemos que nació con WebMatrix.

WebMatrix es una herramienta, más bien una serie de herramientas para facilitar el desarrollo y despliegue de aplicaciones web en diferentes lenguajes, tanto hechas por nosotros como las más utilizadas por la comunidad.

Pero solo con una sintaxis y herramientas no se crean aplicaciones, no? Hace falta un framework, plataforma unas APIs o ALGO a lo que llamar para realizar las tareas =) Ahí es donde entra PAGES.

Pages es un pequeño framework que se utiliza para desarrollar en Razor, incluye la funcionalidad necesaria para manejar formularios, acceder a BBDD, trabajar con plantillas, incorporar redes sociales, video, autenticación… así como un mecanismo de extensibilidad para crear nuestros propios módulos.

Aquí podéis encontrar más información relativa a la programación de ASP.NET Pages https://www.asp.net/webmatrix/tutorials/2-introduction-to-asp-net-web-programming-using-the-razor-syntax

 

Dicho esto… Introducción a Razor

Tradicionalmente, cuando vamos a incluir código en una página web, tenemos que utilizar algún tipo de secuencia de escape para indicar que el bloque se corresponde con código de servidor…

       <? ?> <% %> <%= %> <%: %>… etcétera

Así, cuando tenemos que intercalar código de los dos tipos, empezamos a poner y quitar secuencias de escape. No es raro que nos olvidemos alguna secuencia de cierre sola y aparezca en la página, o que montemos un auténtico jeroglífico como resultado de un gran número de aperturas y cierres

Aunque sea un tronzo pequeño de código, es suficiente para que apreciemos que utilizando Razor, queda una estructura más limpia y legible,  los únicos caracteres especiales que tenemos que tener en cuenta son la arroba @ y la apertura y cierre de llaves { }.

Como muchos ya habréis imaginado, la arroba es el carácter de escape para indicar código de servidor y las llaves marcan los bloques de código de más de una línea. Partiendo del ejemplo de código anterior, la versión Razor es:

Si nos fijamos en los colores del editor (estoy utilizando WebMatrix) vemos que automáticamente se detecta entre bloques de código y de html sin tener que indicarlo (el H3 después de la llave del foreach por ejemplo)

Cada vez que queremos poner código de servidor, lo indicamos con la @ y listo! Vamos a ver que pasa con encadenamiento de strings, layouts, secuencias de escape….

 

Algunos ejemplos en Razor

Bloques

@ es la secuencia de escape para sentencias, pero si queremos poner un bloque de código, declaraciones de variables… hemos de utilizar las llaves y recordar utilizar el punto y coma ; para separar las sentencias.

 

Cadenas de caracteres

Una imagen vale más que mil palabras… ( atención a las secuencias de escape con la @ para los caracteres especiales \ y “ )

 

Objetos frecuentes en el desarrollo web

Tendremos que trabajar con métodos de HTTP, peticiones, objetos de sesión, cookies… para lo que podemos acceder a los típicos objetos de Page, Request, Response…

 

Tu turno… ¡el Reto! – Formulario

Has visto que Razor es muy intuitivo, el reto consistirá en que crees un nuevo sitio web en webmatrix y añadas una página web que actúe como formulario de entrada de datos.

Una vez que el usuario entre los datos y haga click en enviar, la página deberá mostrarle esos datos

y si falta alguno deberá mostrar un mensaje de error.

Pistas: Esperamos que no tengas muy oxidado el uso de los <form> con tanto control de servidor ;)

Recursos

https://weblogs.asp.net/scottgu/archive/2010/07/02/introducing-razor.aspx

https://www.asp.net/webmatrixtenemos mucha más información sobre cómo funciona Razor y ejercicios sobre los diferentes módulos

Solución: En unos días enlazaremos la solución desde este post.

No dudéis en dejar comentarios, dudas… en este post, estaremos monitorizándolo para responder cuanto antes.

Happy Hacking!

David Salgado – @davidsb – Technology Evangelist

PD –> Personalmente veo Razor + WebMatrix como una opción muy buena a la hora de dar los primeros pasos en el desarrollo web, es intuitivo y no tiene demasiadas complicaciones para instalarse y probar.

PD 2-> Y personalmente tb… es mi motor favorito en MVC… puede ser que no haya probado algún otro que tenéis en mente, pero teniendo en cuenta que al motor le llega el modelo, para mi, el equipo Razor + JQuery por ahora es imbatible :)