Crear Html Helpers en ASP.NET MVC

Si hay algo que en general podemos estar conformes (y de mi parte muy conforme) con ASP.NET MVC es la capacidad de extensión que nos brinda en distintos puntos. Siguiendo con lo que iniciamos en el post “Helpers en ASP.NET MVC, reutilizando código en nuestras vistas“, hoy vamos a veres cómo crear nuestros propios Html Helpers en C# para facilitar la escritura de nuestras vistas, evitando tener que repetir código en las mismas.

Lo primero que vamos a comentar es que por defecto tenemos muchos helpers a disposición, son todos aquellos que usamos bajo el namespace Html. Algunos ejemplos de uso son los que podemos ver a continuación, sacados de una de las vistas asociadas a la autenticación en el template inicial de ASP.NET MVC:

Helpers - Ejemplos
ASP.NET MVC Helpers

Algunos de los más comunes y usados son (por nombrar solo algunos):

  • BeginForm()
  • EndForm()
  • Label()
  • ActionLink()
  • TextArea()
  • TextBox()
  • CheckBox()
  • RadioButton()
  • ListBox()
  • DropDownList()
  • Hidden()
  • Password()
  • Display()

Para mayores detalles pueden ver todos los disponibles y cómo usarlos en la documentación oficial.

Básicamente el objetivo de un helper es generar código HTML de forma simple y parametrizada, evitando repetir código (lo cual siempre es un objetivo fundamental), además de permitirnos que nuestras aplicaciones queden mucho más ordenadas, prolijas y mantenibles.

Ahora bien, veamos qué debemos hacer para crear nuestros propios helpers.

Lo primero que vamos a hacer es crear la carpeta Helpers dentro de nuestro proyecto. Para este ejemplo vamos a hacer un helper que nos renderice el HTML de una lista no ordenada (<ul>) a partir de una Enumerable de strings.

Helpers - CarpetaNuevo

Como se puede ver en la imagen creamos la clase estática OwnHelpers, en la cual agregaremos nuestros nuevos helpers. Aquí tenemos dos alternativas: hacer nuestros helpers como extensión junto a los ya existentes bajo el namespace Html, o bien una clase con un método estático que retorna directamente el contenido. Son dos alternativas con una variante muy pequeña en el uso, por lo demás son prácticamente idénticas.

Comenzando por la primera de las opciones, crearemos el método List en nuestra clase de la siguiente forma:

Helpers - AlternativaEstatico.jpg
Helper usando forma por extensión

Aclaremos algunas particularidades indicadas con los números en la imagen:

  1. Nuestro método deberá retornar un MvcHtmlString. Si retornáramos un string plano, en nuestra vista tendríamos el contenido resultante como texto, no como HTML renderizado.
  2. Al ser un método de extensión usamos la palabra clave this, recibiendo como parámetro un HtmlHelper.
  3. Luego de ese parámetro podremos recibir los que necesitemos para cumplir con nuestra funcionalidad.

El siguiente paso será configurar nuestra aplicación para que pueda utilizar estos helpers que estamos creando. Para ello deberemos ir al archivo Web.config ubicado en la carpeta Views (no el Web.config global de la aplicación):

Helpers - ConfigAEditar
Web.config a editar

En dicho archivo agregamos la línea donde indicamos el namespace donde estarán nuestros helpers en la ubicación configuration > system.web.webPages.razor > pages > namespaces:

Helpers - EdicionConfig
Agregamos el namespace de nuestros helpers

Una vez hecho esto podremos ir a alguna vista para utilizar el helper que acabamos de crear. Si queremos tener el mismo a través del autocomplete deberemos compilar la aplicación antes de usarlo.

En nuestro caso iremos a la vista Home / Index y para hacer una prueba sencilla crearemos allí mismo un array de strings, utilizándolo luego como parámetro del helper:

Helpers - UsoEstatico
Uso del helper como método de extensión en la vista

Como se puede ver en la imagen el uso es como cualquier helper nativo, además de tomarnos la documentación que hemos establecido para el mismo.

Ahora nos queda ejecutar nuestra aplicación y realizar la prueba de rigor:

Helpers - ResultadoEstatico
Visualización del resultado del helper

Efectivamente se está renderizando de la forma que esperábamos! 🙂

Cuando hicimos la introducción indicamos que había otra forma de escribir los helpers en C#, que es sin hacerlo como método de extensión. Siguiendo el mismo ejemplo crearemos la clase OtherHelpers, quedando el resultado de la siguiente forma:

Helpers - AlternativaNoEstatico.jpg

Las variantes están en que la clase no es estática y en que no se recibe como parámetro el objeto a extender. Por lo demás la lógica y planteamiento es idéntico.

Lo que si varía es el uso en la vista. Para ello tendremos que invocar el método de la clase en cuestión, pasando los parámetros necesarios:

Helpers - UsoNoEstatico

Como podemos ver, entre un caso y otro solo estamos reemplazando la ubicación del método en cuestión.

Y si hacemos nuevamente la prueba vemos que el resultado es exactamente el mismo para las dos opciones (más allá de que tienen distintos elementos):

Helpers - ResultadoNoEstatico
Visualización de los resultados de ambas variantes

Conclusiones

Podemos ver que un Html Helper en C# es una herramienta muy potente para facilitarnos el trabajo de creación de nuestras vistas, brindándonos una abstracción de muchas cosas repetitivas o con alguna complejidad propia. De esta forma delegamos una responsabilidad y conocimiento particular sobre alguna cuestión de visualización a un método especializado en eso. Además de poder crear nuestros propios helpers, también podemos extender los ya disponibles, o sobre-escribirlos para lograr algún comportamiento particular.

A su vez en este ejemplo los estamos creando en el mismo proyecto donde los usamos, pero bien podríamos hacerlo en un proyecto y solución separados para luego importarlos en nuestras aplicaciones como una DLL o incluso un paquete Nuget. Esto permitiría tener una estandarización en como se visualizan determinados elementos entre todas las aplicaciones que desarrollemos.

La desventaja que podemos marcar es que el HTML que tenga nuestro helper es un texto fijo de C#, lo cual puede llegar a ser algo inadecuado cuando tenemos una gran cantidad de contenido. Igualmente cuando esto sucede puede ser que estamos usando la alternativa incorrecta, ya que allí entra en juego la otra posibilidad que tenemos disponible, los Razor Helpers, que nos permiten escribir código HTML de una forma mucho más práctica. Veremos estos últimos en detalle en el próximo post.

Espero que les haya sido útil, gracias por leer!!

Anuncios

3 comentarios en “Crear Html Helpers en ASP.NET MVC

  1. Nuevamente excelente. Aprendiendo cada día con este blog, voy a ponerlo en práctica, la verdad que se puede ahorrar bastante tiempo acostumbrándose a estas prácticas. Y como comentas por ahí, muy interesante un proyecto común para ir acumulando todos estos recursos.

    Muchas gracias Diego. Un saludo

    Le gusta a 1 persona

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s