Tag Helper para Etiquetas

El elemento etiqueta HTML normalmente es usado en combinación con otro control, para transmitir el propósito del control - en otras palabras y como el nombre lo dice, puede etiquetar otro control. Visualmente, puedes lograr esto posicionando un texto cerca del control, pero cuando se usa una etiqueta, el navegador reconoce que estos dos controles están conectados. Esto te da un par de ventajas, donde la mas notable es el hecho de que cuando presionas la etiqueta, el control enlazado es activado automáticamente. Esto es grandioso para un campo texto, pero es mejor para un "checkbox" o un "radio button", donde la parte seleccionable del control es pequeña.

Para enlazar una etiqueta con otro control se debe usar la propiedad HTML llamada "for" y hacer referencia a la propiedad ID del otro control:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" />

Sin Embargo, cuando se usa un "Tag Helper", logras una fuerte conexión entre el Modelo y la etiqueta - si cambias la propiedad en el Modelo, el cambio se ve automáticamente reflejado en todos los lugares donde uses el "Tag Helper",

La propiedad for

Como mucho otros "Tag Helpers", la conexión al Modelo es creada con la propiedad "for", y como con cualquier otra propiedad del "Tag Helper", necesita un prefijo. Este prefijo es usualmente "asp", a menos que tu específicamente cambies esto. Una etiqueta con "Tag Helper" debería verse mas o menos así:

<label asp-for="FirstName"></label>
<input asp-for="FirstName" />

Fíjate como ya no tienes que especificar el texto de la etiqueta - será sacado automáticamente del Modelo, y el atributo HTML "for" sera rellenado automáticamente para igualar el elemento de entrada designado. El HTML resultante se ve así:

<label for="FirstName">FirstName</label>
<input type="text" id="FirstName" name="FirstName" value="" />

La anotación de datos de visualización

Cuando vemos los dos ejemplos, verás una pequeña diferencia: El primero, donde usé una etiqueta HTML de la vieja escuela, el texto estaba puesto como "First name:". Cuando se uso "Tag Helper", el texto fue automáticamente sacado del Modelo y el resultado fue "FirstName", porque ese es el nombre de la propiedad. Sin embargo, a menudo encontraras que los nombres de propiedades no generan una buena etiqueta. Me refiero a que seguramente todos entenderán el propósito de "FirstName", pero "First Name:" es más correcto y tiene más sentido.

Afortunadamente, esto es fácil de cambiar - simplemente usamos las anotaciones de datos de visualización en el Modelo, así:

public class WebUser
{
    [Display(Name = "First name:")]
    public string FirstName { get; set; }
    ....

El HTML generado se vera ahora así:

<label for="FirstName">First name:</label>
<input type="text" id="FirstName" name="FirstName" value="" />

y lo mejor es que en cualquier momento que cambies la propiedad Name en la anotación de datos de visualización en tu Modelo, se reflejará an cualquier parte en que lo uses, entonces, si tienes multiples Vistas usando el mismo Modelo, no tendrás que editarlas manualmente para reflejar este cambio.

Sumario

El "Tag Helper" para etiquetas es uno de los más simples en el Framework, aun así es muy útil, te permite generar fácilmente etiquetas para tus Formularios y vincularlas con el campo relevante.