NET Core – Criando auxiliares de marca personalizados

ASP.NET Core fornece uma maneira de estender a sintaxe Razor com marcas personalizadas usando TagHelpers. O uso de TagHelpers torna a exibição Razor muito mais fácil de entender de uma pessoa que não é C# devido à aparência html. Em vez de usar auxiliares HTML para criar um rótulo, agora podemos usar um TagHelper.

Por exemplo, se quisermos criar um rótulo para nossa entrada de nome de usuário, devemos usar a seguinte sintaxe.

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

Para definir atributos para o rótulo, devemos fornecer um objeto anônimo como terceiro parâmetro. Para um desenvolvedor de front-end ou pessoa que não é C#, essa sintaxe pode ser desconhecida e alterar a classe ou adicionar classe ou atributo adicional requer um melhor conhecimento de C#.

O mesmo pode ser feito usando o LabelTagHelper:

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

A linha acima é muito mais fácil de entender e se encaixa melhor em html, pois é uma declaração de marcação em vez de código C#.

Como estamos usando TagHelpers, podemos aproveitar o suporte ao Visual Studio IntelliSence.

Isso parece muito incrível, mas que tal criar um TagHelpers personalizado, é possível?

A resposta é sim, isso é possível e você pode criar controles complexos, como grades e menus suspensos, etc.

Para criar um TagHelper personalizado, tudo o que precisamos fazer é herdar a classe TagHelper (insira o hiperlink aqui).

Vamos criar o TagHelper chamado Loader, que carregará recursos como JavaScript e CSS. O Loader é um componente Ignite UI da AMD.

Podemos usar o modelo do Visual Studio no menu Adicionar novo item.

E isso criará a seguinte classe:

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) {}
    }
}

Nosso LoaderTagHelper terá a seguinte estrutura

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

O seguinte será renderizado como uma tag de script contendo html.

O TagHelper deve ser mapeado para ig-loader alterando o valor do HtmlTargetElement para "ig-loader". Os atributos TagHelper devem ser mapeados para propriedades C# e, para isso, usaremos o HtmlAttributeName, onde fornecemos o nome do atributo auxiliar de tag como um valor.

Nossa classe agora deve ficar assim:

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 nosso TagHelper para html de saída, usaremos o método Process. Vamos definir a saída. TagName para esvaziar a string e anexar o html ao conteúdo de saída.

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

Isso é ótimo, mas como criar TagHelpers mais complexos com relação entre eles?

Podemos usar o dicionário TagHelperContext.Items para nos comunicarmos com seu filho TagHelper para criar relação.

Vamos criar um ComboTagHelper que terá uma funcionalidade de seleção múltipla.

Estamos dando a seguinte estrutura:

<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>

Teremos as seguintes classes 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) {}
    }
}

e

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 criar uma relação entre os TagHelpers e inicializar a propriedade MultiSelection no pai com o contexto correto, passaremos a instância do pai na coleção items de seu contexto.

Em nosso método de processo pai, vamos passar isso para a chave ComboTagHelper e obter o contexto filho para que seus atributos possam ser analisados.

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

No processo filho, definiremos uma referência à propriedade MultiSelection do pai e suprimiremos a saída.

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

Agora temos nosso filho TagHelper processado como propriedade do pai e podemos usá-lo para renderizar a saída.

Os TagHelpers estão disponíveis na versão de volume 16.2 de Ignite UI.