Tag-хэлперы в ASP.NET Core MVC. Введение

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

Ключевое отличие tag-хэлперов от html-хэлперов

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

<form method='post' action='Home/Add'>
    <label for="id">ID:</label><br />
    <input type='number' name='id' id="id"/><br />
    <label for="title">Заголовок:</label><br />
    <input name='title' id="title"/><br />
    <label for="author">Автор:</label><br />
    <input name='author' id="author"/><br />
    <label for="body">Текст:</label><br />
    <textarea name="body" id="body"></textarea><br/>
    <input type='submit' value='Отправить' />
</form>

Если бы мы решили воспользоваться строго типизированными html-хэлперами для создания такой формы, то получили бы следующий код представления:

@using(Html.BeginForm("Add","Home",FormMethod.Post))
{
    @Html.LabelFor(m=>m.Id, "ID:")
    <br />
    @Html.TextBoxFor(mbox=>mbox.Id, new{type="number"})
    <br />
    @Html.LabelFor(m=>m.Title, "Заголовок:")
    <br />
    @Html.TextBoxFor(mbox=>mbox.Title)
    <br />
    @Html.LabelFor(m=>m.Author, "Автор:")
    <br />
    @Html.TextBoxFor(mbox=>mbox.Author)
    <br />
    @Html.LabelFor(m=>m.Body, "Текст:")
    <br />
    @Html.TextAreaFor(mbox=>mbox.Body)
}

Мы, как разработчики, прекрасно понимаем, что делает этот код. Но попробуйте передать код представления, скажем, web-дизайнеру. Вряд ли он что-то поймёт, если никогда не работал с ASP.NET Core MVC. В свою очередь, с использованием tag-хэлперов эта же форма может выглядеть вот так:

<form asp-action="Add" asp-controller="Home">
    <label asp-for="Id">ID:</label><br />
    <input type='number' name='id' asp-for="Id" /><br />
    <label asp-for="Title">Заголовок:</label><br />
    <input name='title' id="title" asp-for="Title" /><br />
    <label asp-for="Author">Автор:</label><br />
    <input name='author' id="author" asp-for="Author" /><br />
    <label asp-for="Body">Текст:</label><br />
    <textarea name="body" id="body" asp-for="Body"></textarea><br />
    <input type='submit' value='Отправить' />
</form>

С использованием tag-хэлперов код формы выглядит более привычно, так хэлперы применяются непосредственно к html-элементам и такой код может понять, в принципе, любой человек, хотя бы в общих чертах знакомый с HTML. Для большей наглядности расположим два варианта кода формы рядом:

@using(Html.BeginForm("Add","Home",FormMethod.Post))
{
    @Html.LabelFor(m=>m.Id, "ID:")<br />
    @Html.TextBoxFor(mbox=>mbox.Id, new{type="number"})<br />
    @Html.LabelFor(m=>m.Title, "Заголовок:")<br />
    @Html.TextBoxFor(mbox=>mbox.Title)<br />
    @Html.LabelFor(m=>m.Author, "Автор:")<br />
    @Html.TextBoxFor(mbox=>mbox.Author)<br />
    @Html.LabelFor(m=>m.Body, "Текст:")<br />
    @Html.TextAreaFor(mbox=>mbox.Body)
}

<form asp-action="Add" asp-controller="Home">
    <label asp-for="Id">ID:</label><br />
    <input type='number' name='id' asp-for="Id" /><br />
    <label asp-for="Title">Заголовок:</label><br />
    <input name='title' id="title" asp-for="Title" /><br />
    <label asp-for="Author">Автор:</label><br />
    <input name='author' id="author" asp-for="Author" /><br />
    <label asp-for="Body">Текст:</label><br />
    <textarea name="body" id="body" asp-for="Body"></textarea><br />
    <input type='submit' value='Отправить' />
</form>

Подключение функциональности tag-хэлперов в ASP.NET Core MVC

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

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

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

Итого

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