Вывод информации об окружении с помощью специального тег-хелпера¶

Создадим специальный тег-хелпер для вывода системной информации в макет. Вызвать его из Razor можно, создав элемент <system-info> в шаблоне:

<footer>
    <system-info></system-info>
</footer>

Самый простой способ создать тег-хелпер — унаследоваться от класса TagHelper и переопределить функцию Process() или ProcessAsync():

public class SystemInfoTagHelper : TagHelper
{
    private readonly HtmlEncoder _htmlEncoder;
    public SystemInfoTagHelper(HtmlEncoder htmlEncoder)
    {
        _htmlEncoder = htmlEncoder;
    }

    [HtmlAttributeName("add-machine")]
    public bool IncludeMachine { get; set; } = true;

    [HtmlAttributeName("add-os")]
    public bool IncludeOS { get; set; } = true;

    public override void Process(
        TagHelperContext context,
        TagHelperOutput output)
    {
        output.TagName = "div";
        output.TagMode = TagMode.StartTagEndTag;
        var sb = new StringBuilder();
        if (IncludeMachine)
        {
            sb.Append(" <strong>Machine</strong> ");
            sb.Append(_htmlEncoder.Encode(Environment.MachineName));
        }
        if (IncludeOS)
        {
            sb.Append(" <strong>OS</strong> ");
            sb.Append(_htmlEncoder.Encode(RuntimeInformation.OSDescription));
        }
        output.Content.SetHtmlContent(sb.ToString());
    }
}

Далее, мы внедрили в наш класс HtmlHelper, чтобы кодировать в HTML наши данные; как было показано, необходимо использовать HtmlHelper, чтобы избежать возможных XSS-атак.

Также мы определили два свойства: IncludeMachine и IncludeOS. Они декорированы атрибутом [HtmlAttributeName], что позволяет задавать свойства из шаблона Razor, при этом в VS будет работать IntelliSence и проверка типа значения для этих свойств.

Теперь перейдём к методу Process(), который вызывается движком Razor для выполнения тег-хелпера. В этом методе мы определяем тип тега для отрисовки (<div>), нужно ли визуализировать начальный и конечный теги (или самозакрывающийся тег — зависит от типа тега) и HTML-содержимое тега <div>. HTML-содержимое задаётся через метод Content.SetHtmlContent().

Регистрация тег-хелпера¶

Прежде чем использовать новый тег-хелпер, его надо зарегистрировать в файле его надо зарегистрировать в файле _ViewImports.cshtml, используя директиву @addTagHelper, указав полное имя класса тег-хелпера и сборки, например:

@addTagHelper CustomTagHelpers.SystemInfoTagHelper, CustomTagHelpers

Комментарии

Комментарии