ASP.NET MVC 3 y la sintaxis @helper en Razor


ASP.NET MVC 3 soporta un nuevo motor de vistas llamado "Razor" (además de continuar soportando/ampliando el motor existente de vistas .aspx). Razor minimiza el número de caracteres y pulsaciones de teclado requeridas cuando escribimos una plantilla de vista, y permite un workflow de codificación más rápido y fluido.

Al contrario que otras sintaxis de plantillas, con Razor no tenemos que interrumpir nuestra codificación para indicar explícitamente el comienzo y el fin de bloques de servidor en nuestro HTML. El parser de Razor es tan listo que lo averigua del código. Permite una sintaxis más compacta y expresiva de forma más limpia, rápida y divertida.

Podéis aprender más de algunos pos que he escrito en los últimos 9 meses.

En el post de hoy veremos una característica de Razor que mucha gente aún no conoce - y es la habilidad de definir métodos helper reusables usando la sintaxis @helper.

Escenario de método @helper sencillo

La sintaxis @helper de Razor nos permite crear fácilmente helper methods reusables que pueden encapsular funcionalidad de salida en nuestras plantillas. permiten una mejor reutilización, y facilitan también que el código sea más leible. Veamos un escenario super sencillo sobre cómo se puede usar la sintaxis @helper.

Codifica antes de definir un @helper method.

Veamos un escenario de listado de productos en el que listamos los detalles de los productos, y se muestra el precio del producto - o la palabra "FREE!" si el elemento no cuesta nada:

El código anterior es bastante claro, y la sintaxis de Razor hace que sea sencillo integrarlo en código c# dentro del HTML.

Una cosa que es algo feo, sin embargo, es la lógica if/else para el precio. Normalmente mostraremos los precios en cualquier sitio de la aplicación (o en la misma página), y duplicar la lógica anterior sería propenso a errores y difícil de mantener. Este tipo de escenarios son los primeros candidatos a extraer y refactorizarse en helper methods usando la sintaxis @helper.

Refactorizando el código anterior con sintaxis @helper.

Vamos a extraer la lógica del precio, y encapsularla en un helper method que llamaremos DisplayPrice. Podemos hacerlo reescribiendo el código anterior así:

Hemos usado la sintaxis @helper para definir un helper method llamado "DisplayPrice". Como en métodos comunes de C#/VB, puede contener cualquier número de parámetros (podemos definir parámetros para que sean nulables u opcionales). Al contrario que en métodos C#/VB, los @helper methods pueden contener tanto contenido como código, y soportan la sintaxis de Razor en ellos - lo que hace más fácil de definir y encapsular helper methods de renderizado y formateo:

Podemos invocar @helper methods igual que si lo hiciesemos desde C# o VB:

Visual Studio nos ofrecerá intellisense cuando estemos invocando al método:

Reusar @helper methods entre varias vistas.

En el ejemplo anterior, definimos nuestro @helper method en la misma vista. También podemos definir el @helper method fuera de la vista, y de esta manera poder usarla en las diferentes vistas de nuestro proyecto.

podemos hacer esto guardando nuestro @helper methods en archivos .cshtml/.vbhtml localizados en el directorio App_Code que creamos en la raíz de un proyecto. Por ejemplo, aquí he creado el archivo ScottGu.cshtml en el directorio App_Code, y he definido dos helper methods en el archivo (podéis tener tantos helper methods como querais en cada archivo):

Una vez que nuestros helpers estén definidos a nivel de aplicación, podemos usarlso en cualquier vista de nuestra aplicación.

La plantilla ScottGu.cshtml en el directorio App_Code será compilada hasta una clase llamada ScottGu con  los métodos estáticos de "DisplayPrice" y "AnotherHelper". Podemos re-escribir el ejemplo anterior para que los llame con el siguiente código:

Visual Studio ofrecerá el intellisense apropiado cuando llamemos a estos helpers:

Actualización: Varias personas han detectado que cuando se guardan un @helper en el directorio app_code, no se tiene acceso por defecto a los métodos ASP.NET MVC Html helper (por ejemplo: Html.ActionLink(), Html.TextBox(), etc). Si tenéis acceso a los HTML helpers integrados cuando son definidos en el mismo archivo de vuestras vistas. Esto no está soportado cuando los helpers están en el directorio app_code - añadiremos esto en la próxima release. paul Stovall tiene una clase helper que podemos usar mientrastanto para acceder y usar los Html helper methods integrados con @helper methods que nosotros definamos en el directorio app_code. Podeis aprender cómo se usa aquí.

Resumen

La sintaxis de Razor nos ofrece una forma adecuada de encapsular la funcionalidad de renderizado en helper methods que podemos re-usar en vistas individuales, o entre vistas de nuestro proyecto.

Podemos usar esta funcionalidad para escribir código aún más limpio y mantenible.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos

Artículo original

 

 

 

Un pensamiento en “ASP.NET MVC 3 y la sintaxis @helper en Razor

Deja un comentario