Introducción

En este articulo, voy a ir un poco a través de la historia de ASP/ASP.NET y te diré cómo Microsoft llegó al concepto de los Tag Helpers. En el caso que sólo quieras ver cómo se usan y no te importe demasiado el proceso que ha llevado hasta los Tag Helpers, puedes elegir saltar hasta el Sumario en el pie del articulo y moverte hasta los siguientes artículos donde veremos como trabajan los diferentes Tag Helpers.

Cuando Microsoft reemplazó ASP Clásico por lo que hoy conocemos por ASP.NET WebForms, introdujeron el concepto de controles en el mundo de la codificación para la Web. Esto fué un concepto bien conocido por las aplicaciones de escritorio, pero no para la Web. Los controles permitian obtener mucha funcionalidad "out of the box" escribiendo marcas que eran interpretadas por ASP.NET y convertidas en HTML y CSS antes de acceder al navegador.

Del marcado a los controles de servidor

Microsoft basicamente ha implementado controles de servidor para todos los controles HTML comunes, como asp:TextBox (que será renderizado como una marca HTML INPUT o TEXTAREA ) o el asp:Label. Sin embargo, también fueron mas allá con controles cómo el asp:DataGrid, que toma un grupo de parámetros y opciones y se renderiza cómo una TABLA completa con columnas y filas basadas en la configuración y la fuente de datos.

Desafortunadamente, el concepto de controles de servidor de ASP.NET WebForms nunca se sintió completamente natural para los desarrolladores. Los controles de servidor fueron inicialmente creados para ahorrar tiempo y código dejándote implementar rápidamente funcionalidad avanzada con pocas líneas de marcado. Pero en vez de ahorrar tiempo, te encontraras a menudo escribiendo MAS código, para solucionar casos extraños donde los controles de servidor no daban un completo soporte.

Otra queja importante sobre el control del servidor de ASP.NET WebForms fue la falta de control sobre el HTML resultante: al abstraer el HTML actual en los controles del servidor, ASP.NET WebForms se encargaría de generar la salida al navegador y esto se convirtió en un problema por dos razones:

Primero que todo, a veces el HTML resultante no trabajará en todos los navegadores. En días anteriores cuando ASP.NET WebForms estaba en su apogeo, había muchas diferencias en como los navegadores responderían al HTML y CSS que les entregabas. Como no controlabas el HTML y CSS generado, podías encontrarte con problemas de renderizado que ahora se han hecho imposibles de arreglar.

Segundo, muchos puristas exigen que HTML se formatee de una forma específica, incluso si al navegador no le importa. Como ejemplo, puedes escribir las etiquetas HTML en MAYUSCULAS o minúsculas, puedes usar comillas dobles o simples para los atributos/valores y así sucesivamente. Al navegador no le importa, pero muchos programadores que están acostumbrados a lenguajes de programación que distinguen entre mayúsculas y minúsculas, les duelen los ojos cuando el HTML que han escrito no esta formateado de la misma forma en que lo está el HTML generado por los controles del servidor.

Del servidor a los "HTML Helpers"

Por ésta razón, Microsoft decidió dejar completamente fuera los controles del servidor cuando implementaron ASP.NET MVC. Han escuchado a los desarrolladores quienes querían un control total sobre las etiquetas generadas, incluso si tienen que escribirlas todas ellos mismos. Por esto, inventaron el lenguaje Razor (que fue explicado en detalle en este tutorial), el que permite combinar programación lógica, como If y loops, con etiquetas regulares.

La gente generalmente estaba feliz con este nuevo enfoque, pero faltaba algo. Microsoft siempre se ha esforzado en hacer las cosas fáciles para los desarrolladores y ahora, demasiado código Razor y etiquetas han sido escritos sin la habilidad de conectar los datos del Modelo con una representación visual en la Vista. Por esta razón, introdujeron los "HTML Helpers".

El concepto de HTML Helpers le permitió generar marcas para los datos de su Modelo, especialmente al generar FORM's y sus elementos. Por ejemplo, si quisiera crear un campo de ENTRADA para la propiedad Título de su Modelo, escribiría un marcado como este:

<input type="text" name="Title" value="@Model.Title" />

Con la introducción de los HTML Helpers, puede llamar al método TextBoxFor() en la clase de ayuda Html, para que esta etiqueta se genere automáticamente:

@Html.TextBoxFor(model => model.Title)

Es más corto y obtiene el beneficio adicional de la verificación en tiempo de compilación del código Razor - si la propiedad Título deja de existir de repente, por ejemplo, porque la renombró, el compilador se quejará de ello.

De los HTML Helpers a los Tag Helpers

Gracias a los HTML Helpers, enlazar los datos de su Modelo con el marcado en sus Vistas ahora es mucho más fácil, pero todavía existe un problema desde los días de los controles del servidor: dado que el marcado se ha abstraído en métodos de ayuda, estos métodos de ayuda ahora son responsables de generar su HTML y también tienen que ser lo suficientemente flexibles como para soportar todas las formas en que desee utilizarlos. Considere nuestro ejemplo anterior, pero ahora imagine que queremos agregar un par de propiedades con valores al HTML generado:

@Html.TextBoxFor(model => model.Title, new { @class = "form-control", style = "font-weight: bold; font-size: 120%;"  })

El ejemplo es ahora mucho menos elegante de lo que era antes, precisamente por que queremos agregar las propiedades clase y estilo con valores a la etiqueta INPUT. Para algunos desarrolladores, éste enfoque tampoco era natural - no les gustaba la mezcla de código C# en la sintaxis de Razor con CSS incluido o incluso con JavaScript. Especialmente en formas de gran tamaño, la mezcla constante de etiquetas regulares de HTML y llamadas Razor a los métodos "HTML Helpers" puede verse realmente desordenado.

Microsoft decidió resolver éste problema tomando lo mejor de ambos mundos. Con "Tag Helpers", escribes etiquetas regulares HTML en vez de comandos Razor, pero puedes mezclarlos en atributos personalizados en el lado del servidor, lo que te permitirá, por ejemplo, enlazarlos fácilmente a tus Modelos. Con "Tag Helpers", podríamos reescribir nuestro ejemplo anterior de la siguiente forma:

<input asp-for="Title" class="form-control" style="font-weight: bold; font-size: 120%;" />

Nota que la UNICA cosa que no se ve como una etiqueta/atributo HTML regular es el atributo asp-for. Así es como "ASP.NET MVC" sabe para que propiedad del Modelo fue creado este control - ésta información será usada para generar el nombre del campo de entrada ("Title", en éste caso) y el valor sera añadido automáticamente también. Además, un atributo id será generado para el control, pero eres libre de sobrescribir este valor agregando tu propio atributo id y su valor!

"Tag Helpers" versus "HTML Helpers"

Con todo lo anterior en mente, una cosa es clara: La plataforma ASP.NET, como la mayoría de las otras plataformas, esta bajo desarrollo constante. Nuevos conceptos son continuamente añadidos, mientras que los más antiguos podrían quedar obsoletos. Sin embargo, mientras escribo esto, los "HTML Helpers" son aún aplicables y una opción viable en "ASP.NET MVC". Podrías preferir su sintaxis o la forma en que trabajan, pero por sobre todo, existen cosas que pueden hacer y que los "Tag Helpers" no (aún).

Por ésta razón, verás también, ambos, "Tag Helpers" y "HTML Helpers" utilizados a lo largo de este tutorial. Eso está bien - usa cualquier enfoque que te parezca mejor para realizar la tarea. Después de todo, "Tag Helpers" y "HTML Helpers" son potenciadores: Te ayudarán a completar tareas mundanas con menos pulsaciones de teclas.

Sumario

"Tag Helpers" en "ASP.NET MVC" te asistirán el la generación de etiquetas para tus vistas, especialmente cuando el propósito es enlazar datos de tus Modelo a los controles/etiquetas en tu Vista. Distinto a enfoques anteriores, como controles de servidor y "HTML Helpers", No necesitas cambiar a otro lenguaje para conectar el modelo y la vista y mantienes en control de las etiquetas generadas. En otras palabras, "Tag Helpers" te harán muchas cosas más fáciles al crear tus Vistas. En el siguiente artículo, veremos todos los "Tag Helpers" incorporados, así podrás ver cuan poderosos y, sin embargo, fáciles de usar son.