NET Core: creación de asistentes de etiquetas personalizados

ASP.NET Core proporciona una manera de ampliar la sintaxis Razor con etiquetas personalizadas mediante TagHelpers. El uso de TagHelpers hace que la vista Razor sea mucho más fácil de entender para una persona que no sea C# debido al aspecto html. En lugar de usar ayudantes HTML para crear una etiqueta, ahora podemos usar un TagHelper.

Por ejemplo, si queremos crear una etiqueta para la entrada de nuestro nombre de usuario, debemos usar la siguiente sintaxis.

@Html.Label("Username", "Username:", new { @class = "control-label" })

Para establecer atributos en la etiqueta, debemos proporcionar un objeto anónimo como tercer parámetro. Para un desarrollador front-end o una persona que no es de C#, esta sintaxis puede ser desconocida y cambiar la clase o agregar una clase o atributo adicional requiere un mejor conocimiento de C#.

Lo mismo se puede lograr mediante el uso de LabelTagHelper:

<ig-loader css-path="http://localhost/css"
           javascript-path="http://localhost/css"
           resources="combo"/>

La línea anterior es mucho más fácil de entender y encaja mejor en html, ya que es una declaración de marcado en lugar de código C#.

Dado que estamos usando TagHelpers, podemos aprovechar la compatibilidad con IntelliSence de Visual Studio.

Esto se ve muy impresionante, pero ¿qué pasa con la creación de un TagHelpers personalizado, es posible en absoluto?

La respuesta es sí, esto es posible y puede crear controles complejos como cuadrículas y menús desplegables, etc.

Para crear un TagHelper personalizado, todo lo que tenemos que hacer es heredar la clase TagHelper (Insertar hipervínculo aquí).

Vamos a crear un TagHelper llamado Loader, que cargará recursos como JavaScript y CSS. El cargador es un componente Ignite UI AMD.

Podemos usar la plantilla de Visual Studio desde el menú Agregar nuevo elemento.

Y eso creará la siguiente clase:

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    // You may need to install the Microsoft.AspNetCore.Razor.Runtime package into your project
    [HtmlTargetElement("tag-name")]
    public class LoaderTagHelper: TagHelper {
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

Nuestro LoaderTagHelper tendrá la siguiente estructura

<ig-loader css-path="http://localhost/css"
           javascript-path="http://localhost/css"
           resources="combo" />

Lo siguiente se renderizará como una etiqueta de script que contiene html.

TagHelper debe asignarse a ig-loader cambiando el valor de HtmlTargetElement a "ig-loader". Los atributos TagHelper deben asignarse a las propiedades de C# y, para lograrlo, usaremos HtmlAttributeName, donde proporcionamos el nombre del atributo auxiliar de etiqueta como valor.

Nuestra clase ahora debería verse así:

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-loader")]
    public class LoaderTagHelper: TagHelper {
        [HtmlAttributeName("css-path")]
        public string CssPath {
            get;
            set;
        }
        [HtmlAttributeName("javascript-path")]
        public string JavaScriptPath {
            get;
            set;
        }
        [HtmlAttributeName("resources")]
        public string Resources {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

Para renderizar nuestro TagHelper en html de salida, usaremos el método Process. Vamos a establecer la salida. TagName para vaciar la cadena y anexar el html al contenido de salida.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    output.TagName = string.Empty;
    output.Content.AppendHtml($" ");
}

Esto es genial, pero ¿cómo crear TagHelpers más complejos con relación entre ellos?

Podemos usar el diccionario TagHelperContext.Items para comunicarnos con su hijo TagHelper con el fin de crear una relación.

Vamos a crear un ComboTagHelper que tendrá una funcionalidad de selección múltiple.

Le estamos dando la siguiente estructura:

<ig-combo ig-data-source="@Model" ig-key="Id" ig-value="Name">
    <ig-combo-multi-selection ig-is-enabled="true" ig-enable-checkboxes="true" />
</ig-combo>

Tendremos las siguientes clases de C# relativamente:

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-combo")]
    public class ComboTagHelper: TagHelper {
        [HtmlAttributeName("ig-key")]
        public string Key {
            get;
            set;
        }
        [HtmlAttributeName("ig-value")]
        public string Value {
            get;
            set;
        }
        [HtmlAttributeName("ig-data-source")]
        public object DataSource {
            get;
            set;
        }
        public MultiSelectionTagHelper MultiSelection {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

y

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace WebApplication1.TagHelpers {
    [HtmlTargetElement("ig-combo-multi-selection")]
    public class MultiSelectionTagHelper: TagHelper {
        [HtmlAttributeName("ig-enable-checkboxes")]
        public bool EnableCheckBoxes {
            get;
            set;
        }
        [HtmlAttributeName("ig-is-enabled")]
        public bool Enabled {
            get;
            set;
        }
        public override void Process(TagHelperContext context, TagHelperOutput output) {}
    }
}

Para crear una relación entre los TagHelpers e inicializar la propiedad MultiSelection en el padre con el contexto correcto, pasaremos la instancia del padre en la colección de elementos de su contexto.

En nuestro método de proceso principal, vamos a pasar esto a la clave ComboTagHelper y obtener el contexto secundario para que se puedan analizar sus atributos.

public async override void Process(TagHelperContext context, TagHelperOutput output)
{
    context.Items.Add(typeof(ComboTagHelper), this);
    await output.GetChildContentAsync();
    // Set the output of the TagHelper
}

En el proceso hijo, estableceremos una referencia a la propiedad MultiSelection del padre y suprimiremos la salida.

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    ((ComboTagHelper)context.Items[typeof(ComboTagHelper)]).MultiSelectionSettings = this;
    output.SuppressOutput();
}

Ahora tenemos nuestro TagHelper hijo procesado como propiedad del padre y podemos usarlo para renderizar la salida.

Los TagHelpers están disponibles en la versión de volumen 16.2 de Ignite UI.