Los asistentes de etiquetas permiten que el código del lado servidor participe en la creación y representación de elementos HTML en Razor archivos. Hay muchos asistentes de etiquetas integrados para tareas comunes, como crear formularios, vínculos, cargar recursos y mucho más, e incluso más disponibles en repositorios públicos de GitHub y como paquetes NuGet. Los asistentes de etiquetas se crean en C#, y tienen como destino elementos HTML basados en el nombre del elemento, el nombre del atributo o la etiqueta principal.
Si está familiarizado con los HTML Helpers, los Tag Helpers reducen las transiciones explícitas entre HTML y C# en las vistas Razor. En muchos casos, los asistentes HTML proporcionan un enfoque alternativo a un asistente de etiquetas específico, pero es importante reconocer que los asistentes de etiquetas no reemplazan a los asistentes HTML. No hay un asistente de etiquetas para cada asistente HTML. Los asistentes de etiquetas no son compatibles con los componentes Razor. Normalmente, el marcado Razor con asistentes de etiquetas tiene un aspecto similar al HTML estándar. Esto contrasta fuertemente con HTML Helpers, el enfoque anterior para la creación del lado del servidor de marcado en vistas Razor.
La Importancia del Elemento HTML `<label>`
El elemento <label> se utiliza para asociar una etiqueta con un campo de entrada en un formulario. Esta asociación ayuda a los usuarios a comprender la información solicitada en el campo del formulario. 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.
Existen dos formas de usar las etiquetas label, la que acabamos de ver se puede llamar forma implícita, y la que vamos a ver ahora es la forma explícita. Consiste en asignar un identificador en el atributo for a cada etiqueta label para relacionarla con la etiqueta input que contiene el mismo identificador en el atributo id.
Por ejemplo, si el campo de entrada no puede colocarse dentro de la etiqueta label, conéctalos manualmente:
Lea también: IVA 21% Excel
<label for="FirstName">First name:</label><input type="text" id="FirstName" />
Aquí, la etiqueta label utiliza for="name" y el campo de entrada utiliza id="name". Los valores coincidentes crean la conexión.
Declarando `<label>` con `LabelTagHelper` en MVC
El atributo incorporado LabelTagHelper puede tener como destino el elemento HTML <label> cuando se aplican los atributos LabelTagHelper. La mayoría de los asistentes de etiquetas integradas tienen como destino elementos HTML estándar y proporcionan atributos del lado servidor para el elemento. Por ejemplo, el <input> elemento usado en muchas vistas de la carpeta Views/Account contiene el asp-for atributo. Este atributo extrae el nombre de la propiedad de modelo especificada en el HTML representado. El atributo asp-for está disponible mediante la propiedad For en LabelTagHelper.
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 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.
<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í:
Lea también: Guía IVA reducido
<label for="FirstName">FirstName</label><input type="text" id="FirstName" name="FirstName" value="" />
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.
El marcado es mucho más limpio y fácil de leer, editar y mantener que el enfoque de los asistentes HTML. El código de C# se reduce al mínimo que el servidor necesita conocer. Los asistentes de etiquetas no poseen el elemento al que están asociados; participan en la representación del elemento y el contenido.
Habilitación de Asistentes de Etiquetas
En este caso, el archivo de vista es Pages/_ViewImports.cshtml, que de forma predeterminada hereda todos los archivos de la carpeta Pages y las subcarpetas; haciendo que los asistentes de etiquetas estén disponibles. El código anterior usa la sintaxis de comodines ("*") para especificar que todas los asistentes de etiquetas del ensamblado especificado (Microsoft.AspNetCore.Mvc.TagHelpers) estarán disponibles para todos los archivos de vista del directorio o subdirectorio Vistas. AspNetCore.Mvc.TagHelpers" especifica el ensamblado que contiene los asistentes de etiquetas. La mayoría de los desarrolladores prefieren usar la sintaxis de comodín "*". La sintaxis de caracteres comodín permite insertar el carácter comodín "*" como sufijo en un FQN. Puede agregar un _ViewImports.cshtml elemento a cualquier carpeta de vista y el motor de vistas aplica las directivas tanto de ese archivo como del Views/_ViewImports.9298e096.cshtml archivo.
Soporte de IntelliSense para Asistentes de Etiquetas
Considere la posibilidad de escribir un elemento HTML <label>. El icono identifica el elemento como destino de los asistentes de etiquetas. Tan pronto como se escriba un atributo del asistente de etiquetas, las fuentes de etiqueta y atributo cambian. Si usa el tema de color predeterminado "Azul" o "Claro" de Visual Studio, la fuente es púrpura en negrita. Si usa el tema "Oscuro", la fuente es verde azulado en negrita. Puede usar el acceso directo CompleteWord de Visual Studio (el valor predeterminado es Ctrl+barra espaciadora) entre comillas dobles (""). Ahora se encuentra en C#, como si estuviera en una clase de C#. IntelliSense muestra todos los métodos y propiedades del modelo de página. Los métodos y propiedades están disponibles porque el tipo de propiedad es ModelExpression. IntelliSense enumera las propiedades y los métodos disponibles para el modelo en la página.
Deshabilitar un Asistente de Etiquetas
Puede deshabilitar un asistente de etiquetas en el nivel de elemento con el carácter de exclusión ("!") del asistente de etiquetas. Debe aplicar el carácter de exclusión del asistente de etiquetas en la etiqueta de apertura y de cierre. (El editor de Visual Studio agrega automáticamente el carácter de exclusión a la etiqueta de cierre al agregar uno a la etiqueta de apertura).
Lea también: ¿Cómo localizar tus XML del SAT?