Usando "Tag Helpers"

En el artículo previo, hablamos sobre como el concepto de "Tag Helpers" fue inicialmente agregado al Framework MVC. También vimos un ejemplo simple de "Tag Helpers" en acción, pero en este artículo, profundizaremos en el como trabajan y como puedes comenzar a usarlos.

Como trabajan los "Tag Helpers"?

Mira este ejemplo:

<input class="form-control" asp-for="Title" />

Al principio esto puede parecer una etiqueta INPUT regular, pero si se mira más de cerca, te darás cuenta que el último es un atributo especial. El prefijo asp- te dirá que esta etiqueta HTML está usando "Tag Helpers" y que su salida, enviada al navegador, será manipulada por el servidor. En éste caso específico, usamos el atributo asp-for para instruir a ASP.NET que enlace este campo de entrada a una propiedad llamada Title en el Modelo.

Imagínate que tu Modelo es una clase llamada Movie, el que tiene un propiedad llamada Title. Porque has usado la propiedad Title en el atributo asp-for, "ASP.NET MVC" enlazará automáticamente ésta propiedad y llenara el los atributos "name", "id" y "value" de la entrada regular HTML de acuerdo con el name y valor de la propiedad enlazada. El resultado se verá como sigue:

<input class="form-control" type="text" id="Title" name="Title" value="The Godfather">

Dos cosas que son geniales en esto: Primero que todo, un mouton de código Markup fue generado para ti automáticamente, ahorrándote un montón de digitación y tiempo. Segundo, el atributo de "Tag Helper" asp-for es verificado en tiempo de compilación, así, si alguna vez escribes mal la propiedad o repentinamente decides cambiar su nombre en el Modelo, el compilador reclamará y te obligará a arreglarlo antes que liberes tu trabajo y potencialmente desbarates tu sitio web!

La directiva "addTagHelper"

Para usar "Tag Helpers" en tus Vistas, necesitas agregar soporte. Esto es hecho usando la directiva addTagHelper, ya sea directo en la Vista donde quieres usarla, o si deseas usarlo en todas tus Vistas: En el archivo _VireImports.cshtml. Sugiero la solución del archivo _ViewImports.cshtml a no ser que tengas una razón específica para no querer el soporte para "Tag Helpers" en todas tus Vistas.

Fíjate que si has usado alguna de las plantillas que no este vacía en Visual Studio para crear tu proyecto, el soporte para "Tag Helpers" ya podría estar agregado. Busca un archivo llamado _ViewImports.cshtml en tu proyecto - si está ahí, e incluye la línea de más abajo, estás listo para continuar!

Para agregar soporte para los "Tag Helpers" incorporados, que son los que vamos a discutir en este artículo, como también en los siguientes, deberías agregar la siguiente línea:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Después de hacer esto, deberías poder ver las propiedades asp-* en el IntelliSense cada vez que digites una etiqueta HTML soportada por uno de los "Tag Helpers". La sintaxis de ésta directiva luce como lo siguiente:

@addTagHelper [namespace], [assembly]

En nuestro ejemplo estamos importando todos los "Tag Helpers" (como denota el comodín asterisco) desde Microsoft.AspNetCore.Mvc.TagHelpers. En caso de que quieras limitar los "Helpers" que se importan, puedes especificar solo uno, usando su nombre completo (p.ej. Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper), o puedes importar todos los "Tag Helpers" dentro de un nombre de espacio así: Microsoft.AspNetCore.Mvc.TagHelpers.*

La directiva addTagHelper puede además ser usada para agregar soporte para tus "Tag Helpers" personalizados - hablaremos sobre eso más adelante!

Sumario

Los "Tag Helpers" hacen mucho más fácil el escribir código Markup, mientras que tienen el beneficio extra de crear una relación estrecha entre tus controles/etiquetas HTML y tu Modelo. Esto se hará más obvio en el próximo artículo, donde describiremos varios "Tag Helpers".