Tag-хэлперы в ASP.NET Core MVC. Создание tag-хэлперов

ASP.NET Core MVC предоставляет достаточно tag-хэлперов, упрощающих нам выполнение различных задач, начиная от создания форм для отправки данных на сервер и. заканчивая, tag-хэлперами для кэширования данных. Вместе с этим, мы можем создавать собственные tag-хэлперы с помощью которых мы можем реализовывать какие-либо операции в представлениях. Здесь и далее мы рассмотрим процесс создания собственных tag-хэлперов в ASP.NET Core MVC.

Пример собственного tag-хэлпера

Tag-хэлпер — это любой класс C#, реализующий интерфейс ITagHelper, однако, обычно, разработчики tag-хэлперов наследуют свой класс от класса TagHelper, что позволяет получить сразу доступ к важному методу — Process(). Попробуем создать свой первый tag-хэлпер, который будет выводить в представлении всего одну строку — день недели.

Создадим новый проект ASP.NET Core MVC и добавим в него папку TagHelpers. Создадим в папке новый файл с классом C# DayTagHelper.cs:

Теперь напишем «скелет» нашего tag-хэлпера следующим образом:

using Microsoft.AspNetCore.Razor.TagHelpers;

namespace AspNetMvcTagCreate.TagHelpers
{
    public class DayTagHelper: TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {

        }
    }
}

Здесь стоит отметить, что мы используем в названии класса соглашение по умолчанию согласно которому классы, представляющие собой tag-хэлперы, имеют в названии суффикс TagHelper. Вся часть названия класса до этого суффикса будет использоваться ASP.NET Core MVC как название тэга хэлпера, то есть в разметке представления мы будем писать просто — <day>. Такое соглашение не обязательно к исполнению и мы могли бы назвать наш класс, например, просто Day, но следование этому и другим соглашениям по умолчанию позволяют сделать ваш код более понятным для других разработчиков.

Следующий момент — это переопределенный метод Process(). Именно в этом методе мы будем реализовывать логику нашего хэлпера. Метод принимает два параметра:

• объект класса TagHelperContext — контекст тега, который может содержать какие-либо данные, используемые для отображения, например, атрибуты тэга,
• объект класса TagHelperOutput, который отвечает за генерацию выходного элемента html.

Более подробно с этими объектами мы познакомимся в следующих частях, а пока вернемся к нашему классу и напишем следующий код метода Process():

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    output.TagName = "div";
    output.Content.SetContent($"Сегодня {DateTime.Now:dddd}");
}

В данном случае, мы воспользовались свойствами объекта для output и указали html-тег, на который будет заменяться тэг хэлпера (div) и определили содержимое тега — строку вида «Сегодня [день недели]«. Теперь необходимо подключить наш тег в приложении, чтобы им можно было воспользоваться в представлениях. Для подключения tag-хэлперов в проект мы должны воспользоваться директивой Razor @addTagHelper.

Если предполагается, что наш tag-хэлпер будет использоваться во многих представлениях проекта, то для его подключения лучше воспользоваться файлом _ViewImports.cshtm, иначе, если мы используем хэлпер в одном-двух представлениях, то можно использовать директиву @addTagHelper непосредственно в самом представлении.

Воспользуемся файлом _ViewImports.cshtm и подключим наш tag-хэлпер в проекте следующим образом:

@addTagHelper *, AspNetMvcTagCreate

здесь строка AspNetMvcTagCreate — это название сборки (проект в VS) в которой содержится tag-хэлпер, а символ * указывает на то, что будут доступны все tag-хэлперы из сборки. Такой способ подключения tag-хэлперов наиболее распространен, однако, можно использовать и такой способ подключения конкретного tag-хэлпера:

@addTagHelper AspNetMvcTagCreate.TagHelpers.DayTagHelper, AspNetMvcTagCreate

или такой (для подключения всех tag-хэлперов из определенного пространства имен:

@addTagHelper AspNetMvcTagCreate.TagHelpers.*, AspNetMvcTagCreate

После того, как tag-хэлпер каким-либо образом подключен в проект, можно им воспользоваться. Например, выведем день недели на главной странице приложения:

@{
    ViewData["Title"] = "Home Page";
}

<day></day>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

Важно отметить, что конкретно сейчас неважно, что тэг <day> не содержит внутри себя никакой информации. Даже, если мы используем его так:

<day>День недели</day>

то строка внутри тэга не будет ничего значить и каким-либо образом выводиться — мы увидим точно такой же вывод, как и на рисунке выше.

Итого

Сегодня мы познакомились в общих чертах с тем, как можно создавать собственные tag-хэлперы и использовать их в проектах ASP.NET Core MVC. Класс tag-хэлпера обычно наследуется от класса TagHelper и, в соответствии с соглашением по умолчанию, может содержать в названии суффикс TagHelper. В представлении класс tag-хэлпера будет представлен обычным html-тегом с названием, соответствующим названию класса без суффикса.