Tag-хелперы

Введение в tag-хелперы

Tag-хелперы представляют собой функциональность, предназначенную для генерации HTML-разметки. Tag-хелперы применяются в представлениях и выглядят как обычные html-элементы или атрибуты, однако при работе приложения они обрабатываются движком Razor на стороне сервера и в конечном счете преобразуются в стандартные html-элементы.

Tag-хелперы представляют более удобный способ для генерации html-элементов, нежели обычные html-хелперы, поскольку tag-хелперы во многом выглядят как обычные html-элементы, Visual Studio имеет встроенную поддержку IntelliSense для tag-хелперов

Использовать tag-хелперы довольно просто. Рассмотрим на примере примитивного проекта. Пусть у нас есть проект по типу ASP.NET Core Empty. Определим в файле Program.cs подключение необходимых сервисов MVC:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

app.MapControllerRoute(
	name: "default",
	pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Для тестирования в проекте определим папку Controllers, а в нее поместим следующий контроллер HomeController:

using Microsoft.AspNetCore.Mvc;

namespace MvcApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index() => View();
        public string Contacts() => "Contacts page";
    }
}

Для представлений этого контроллера создадим в проекте папку Views, а в ней - каталог Home. Затем в папку Views/Home поместим новое представление Index.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<a asp-controller="Home" asp-action="Contacts">Контакты</a>

Сначала в представлении идет директива addTagHelper

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Первый параметр директивы указывает на tag-хелперы, которые будут доступны в представлении, а второй параметр определяет библиотеку хелперов. В данном случае директива использует синтаксис подстановок - знак звездочки ("*") означает, что подключаются все хелперы из библиотеки Microsoft.AspNetCore.Mvc.TagHelpers.

Далее идет собственно tag-хелпер:

<a asp-controller="Home" asp-action="Contacts">Контакты</a>

Внешне данный хелпер напоминает обычную ссылку - стандартный элемент html, однако это не элемент html. И если мы воспользуемся всплывающей подсказкой, то увидим, что кроме обычных для элемента <a /> он имеет ряд других:

Данный хелпер создает ссылку, для которой в качестве контроллера используется Home, а в качестве метода Contact. Такой хелпер будет интуитивно более понятным и привычным, нежели создание ссылки с помощью Html.ActionLink:

@Html.ActionLink("Контакты", "Contacts", "Home")

В то же время нам необязательно использовать именно tag-хелперы. Мы можем использовать обычные html-хелперы, если они нам более удобны.

В итоге при запуске проекта вместа данного tag-хелпера будет сформирована гиперссылка, по нажатию на которую запрос будет обрабатываться методом Contacts контроллера Home:

_ViewImports.cshtml и @addTagHelper

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

Итак, добавим в проект в папку Views новый файл _ViewImports.cshtml:

В файле _ViewImports.cshtml определим подключение tag-хелперов:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

После этого из представления Index.cshtml можно удалить подключение tag-хелперов и оставить только создание ссылки:

<a asp-controller="Home" asp-action="Contacts">Контакты</a>

Также мы можем конкретизировать применение хелперов к определенной группе представлений. Например, если у нас есть каталог Views/Home - специально для представлений для контроллера HomeController, и мы хотим применить только к ним определенные хелперы. В этом случае мы можем добавить файл _ViewImports.cshtml непосредственно в этот каталог. И любой tag-хелпер, добавленный директивой @addTagHelper из файла Views/Home/_ViewImports.cshtml, будет применяться только к представлениям из каталога Views/Home.

Удаление tag-хелперов

Еще одна директива removeTagHelper удаляет ранее добавленные tag-хелперы. Ее применение аналогично:

@removeTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"

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