Tag-хэлперы в ASP.NET Core MVC. Tag-хэлперы элементов форм

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

Tag-хэлпер FormTagHelper

Хэлпер FormTagHelper представлен html-тэгом <form> и позволяет определить в представлении ASP.NET Core MVC веб-форму. Этот tag-хэлпер может принимать следующие атрибуты:

С использованием большинства этих атрибутов мы уже знакомы по работе с tag-хэлпером AnchorTagHelper, поэтому, повторно рассматривать их действие мы не будем. Единственный атрибут, действие которого можно продемонстрировать — это asp-antiforgery, который позволяет сгенерировать для формы antiforgery token. Например,

<form asp-action="Add" asp-controller="Home" asp-antiforgery="true">
   //тут элементы формы
</form>

сформирует следующую веб-форму:

<form action="/Home/Add" method="post">
//тут элементы формы   
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8HsyHGkNz6JCiBgY5Sb3r9Qk0p-d4u6k1XVUPmgPZklYPjAQUKkmxODU9P4qEAWjV8aUThqdbHh80izRo26oQS4Rnvyqit759yYlFQ2ivexF_KM7xlDny8rWb8gweUmfhTO1zpE1ix-43-2dyLnPqnQ" />
</form>

следует отметить, что по умолчанию, значение для этого атрибута равно true, поэтому имеет смысл его использовать только в том случае, если генерация токена вам не требуется, передав в качестве значения атрибута false. Теперь рассмотрим tag-хэлперы отдельных элементов веб-форм.

Атрибут asp-for

Все рассмотренные ниже tag-хэлперы, используемые в формах, имеют один общий атрибут asp-for, указывающий свойство модели создается элемент.

Создание формы с использованием tag-хэлперов

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

public enum PostType 
{
    Draft = 1,
    Note = 2, 
    Article = 3 
}

public class Post
{
    public DateTime CreateAt { get; set; }
    public int Id { get; set; }
    public string Title { get; set; }
    public string Author { get; set; }
    public string Body { get; set; }
    public PostType PostType { get; set; };
}

InputTagHelper

InputTagHelper создает поле ввода. Для нашей модели мы должны создать поля ввода даты создания, заголовка, и автора. Создавать форму будем в представлении Views/Home/Index.cshtml:

@model Post

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

<form asp-action="Add" asp-controller="Home" asp-antiforgery="false">
    <input asp-for="CreateAt" type="date"/> <br/>
    <input name='title' id="title" asp-for="Title" /><br />
    <input name='author' id="author" asp-for="Author" /><br />
</form>

Здесь, для каждого элемента мы указали значение атрибута asp-for, передав в него название свойства модели, к которому будет относится элемент формы. В Visual Studio для этого можно воспользоваться списком:

Также, стоит обратить внимание на первый элемент input для которого указан дополнительный атрибут type, указывающий на тип значения:

<input asp-for="CreateAt" type="date"/>

в данном случае, поле будет использоваться для ввода даты. Также, этот атрибут может принимать следующие значения:

Кроме перечисленных в таблице наиболее часто используемых значений, также есть и более «специфические» значения. Например, мы можем создать вот такое поле ввода:

<input asp-for="Color" type="color"/>

Что позволит сгенерировать вот такой элемент в представлении:

Теперь вернемся к нашей форме. На данный момент мы сформировали следующие элементы:

Добавим к каждому элементу соответствующие метки:

LabelTagHelper

Tag-хэлпер LabelTagHelper используется для тега label и создаёт метку для какого-либо поля. Для нашей формы мы можем использовать этот хэлпер следующим образом:

<form asp-action="Add" asp-controller="Home" asp-antiforgery="false">
    <label asp-for="CreateAt"></label><br />
    <input asp-for="CreateAt" type="date"/> <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/>
</form>

В результате сформируется следующая форма:

<label asp-for="CreateAt">Дата создания</label><br />

public class Post
{
    [DisplayName("Дата создания")]
    public DateTime CreateAt { get; set; }
    public int Id { get; set; }
    [DisplayName("Заголовок")]
    public string Title { get; set; }
    [DisplayName("Автор")]
    public string Author { get; set; }
    [DisplayName("Содержание")]
    public string Body { get; set; }
    [DisplayName("Тип")]
    public PostType PostType { get; set; }
}

TextAreaTagHelper используется для создания многострочного текстового поля textarea.  Это поле мы можем использовать для свойства Body нашей модели:

<textarea asp-for="Body"></textarea>

в результате, наша форма примет следующий вид (с учётом написанного ранее кода):

SelectTagHelper

SelectTagHelper создает элемент списка. Этот элемент мы можем применить к свойству PostType нашей модели, которое представлено типом enum PostType. Для создания списка выбора мы должны определить у этого tag-хэлпера значение атрибута asp-items. Для начала, немного дополним тип PostType аннотациями:

using System.ComponentModel.DataAnnotations;

namespace AspTagHelpers.Models
{
    public enum PostType 
    {
        [Display(Name = "Черновик")]
        Draft = 1,
        [Display(Name = "Заметка")]
        Note = 2,
        [Display(Name = "Статья")]
        Article = 3 
    }
}

так как атрибут DisplayName не может применяться к элементам перечислений, то в данном случае, мы подключили пространство имен System.ComponentModel.DataAnnotations и используем атрибут Display в параметре Name которого передаем значение имени. Теперь перейдем в представление и добавим список выбора следующим образом:

<label asp-for="PostType"></label><br />
<select asp-for="PostType" asp-items="@Html.GetEnumSelectList(typeof(PostType))"></select><br />

Так как атрибут asp-items принимает значение IEnumerable<SelectListItem>, то для создания такой коллекции мы воспользовались методом Html.GetEnumSelectList(), передав в этот метод в качестве параметра тип перечисления. В результате, наша форма примет следующий внешний вид:

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

<select asp-for="PostType" asp-items="@Html.GetEnumSelectList(typeof(PostType))">
    <option selected="selected" disabled="disabled">Выберите тип записи</option>
</select><br />

Итого

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