HTML-хелперы

  • Михаил
  • 12 мин. на прочтение
  • 109
  • 19 Nov 2022
  • 20 Nov 2022

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

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

Использовать tag-хелперы довольно просто. Например, определим в представлении следующий код:

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

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

Tag хелперы в ASP.NET MVC Core

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

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

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

_ViewImports.cshtml и @addTagHelper

Проект ASP.NET MVC Core уже по умолчанию подключает функциональность tag-хелперов в представления с помощью установки в файле _ViewImports.cshtml следующей директивы:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

Если вдруг у нас не окажется подобной директивы, то ее добавление в представления позволяет использовать все встроенные tag-хелперы.

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

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

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

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