Hace unos días que tenemos disponible la Release Candidate 1 de ASP.NET 5 y entre muchas de las novedades que hemos ido viendo y una de las más interesantes,  son los Tag Helpers.

¿Qué son los Tag Helpers?

Hasta ahora al trabajar con los controles de servidor ASP.NET utilizábamos markups como Razor para facilitar escribir de una manera facil estos controles, pero para eso teníamos que aprendernos la sintaxis de este lenguaje y no era muy intuitivo para los desarrolladores Html.  Con los nuevos Tag Helpers todo esto cambia y facilita la integración de los equipos de maquetación con las paginas de ASP.NET.

• Razor antes de los Tag Helpers:

• Con los nuevos Tag Helpers:

Como se puede observar ahora es mucho menos intrusivo y los maquetadores web no tendrán ningún problema para utilizar los controles Html y tan solo tenemos que rellenar los nuevos atributos para que ASP.NET pinte los controles correctamente con las opciones del servidor.

Usar Tag Helpers

Los nuevos Tag Helpers nos pueden servir para:

• Crear formularios
• Links
• Controles personalizados
• Cargar ficheros JS y CSS
• cachear partes de la página

Tipos de Tag Helpers

A la hora de utilizar los Tag Helpers nos podemos encontrar con diferentes tipos:

• Html que se modifica el output: controles Html standard con atributos especiales para pintar el control con los datos del modelo asociado a la vista.

• Nuevos elementos con output personalizado: Tags con controles totalmente personalizados.

• Elementos sin output : NO necesitan pintar nada en pantalla pero nos facilitaran tareas para utilizar en la página.
  • Environment: podemos cargar ficheros dependiendo de una variable del sistema y esto nos puede permitir por ejemplo cargar los scripts dependiendo si queremos debugar o compilar para desplegar.
  • Cache: Nos permite de una manera muy fácil poder especificar como mantener el cache de servidor de una parte de nuestra página.

Ejempo de Formulario con Tag Helpers

Hasta ahora cuando creábamos un formulario con razor utilizábamos la sintaxis clásica con la arroba para utilizar los controles asp.net  a través del modelo.

Razor Clásico:

Razor con Tag Helpers:

Ahora se utilizan los controles HTML de forma natural, solo tendremos que utilizar los atributos relacionados con asp.net con el intelligent del modelo como teníamos antes.

Utilizar directamente con los controles html nos permite trabajar de forma más natural.

Custom Tag Helpers

Otras de las posibilidades que tenemos es poder crear controles personalizados, pero no penséis en controles con ciclo de vida como los de los web forms. Son controles HTML sin estado.

Lo único que tenemos que hacer es una clase que implemente ITagHelper.

[HtmlTargetElement(Attributes ="custom-tag")]
    public class CustomList : TagHelper
    {
        [HtmlAttributeName("custom-tag")]
        public int Repeat { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            for (int i = 0; i < Repeat; i++)
            {
                output.Content.AppendHtml(
string.Format("
<ul>Hola Reconnect({0})</ul>

",i));
            }
        }

    }

Para utilizar estos tags primero nos tenemos que asegurar de añadir el prefijo de nuestros tags a la configuración de las vistas «ViewImports.cshtml»

Luego solo lo tenemos que utilizar como cualquier otro control Html.

<ul custom-tag="5">

<li>Test</li>

</ul>

Como podéis comprobar ahora tenemos una herramienta súper potente que vive en una perfecta armonía con el desarrollo web. Está claro el movimiento de Microsoft acercando la herramienta y el desarrollo a un entorno mucho más amigable con los equipos de frontEnd.