Tag-хелперы форм

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

Рассмотрим применение хелперов на примере следующих моделей:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }

    public int CompanyId { get; set; }
    public Company Company { get; set; }
}

public class Company
{
    public int Id { get; set; }
    public string Name { get; set; }
}

И допустим в контроллере определено действие Create для создания нового объекта Product:

using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using TagHelpersApp.Models;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace TagHelpersApp.Controllers
{
    public class HomeController : Controller
    {
        IEnumerable<Company> companies = new List<Company>
        {
            new Company { Id = 1, Name = "Apple" },
            new Company { Id = 2, Name = "Samsung" },
            new Company { Id = 3, Name = "Google" }
        };
        public IActionResult Create()
        {
            ViewBag.Companies = new SelectList(companies, "Id", "Name");
            return View();
        }

        [HttpPost]
        public string Create(Product product)
        {
            Company company = companies.FirstOrDefault(c => c.Id == product.CompanyId);
            return $"Добавлен новый элемент: {product.Name} ({company?.Name})";
        }
    }
}

Ранее для создания форм мы могли бы использовать html-хелперы:

@using TagHelpersApp.Models
@model Product

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.Name)
        @Html.EditorFor(m => m.Name)
    </div>
    <div>
        @Html.LabelFor(m => m.Price)
        @Html.EditorFor(m => m.Price)
    </div>
    <div>
         @Html.LabelFor(m => m.Company)
         @Html.DropDownListFor(m => m.CompanyId, ViewBag.Companies as IEnumerable<SelectListItem>)
    </div>
    <div>
        <input type="submit" value="Save" />
    </div>
}

С помощью tag-хелперов мы можем определить следующую аналогичную форму:

@model TagHelpersApp.Models.Product

<h2>Добавление телефона</h2>

<form asp-action="Create" asp-controller="Home"  asp-antiforgery="true">
    <div>
        <div>
            <label asp-for="Name"></label>
            <input type="text" asp-for="Name" />
        </div>
        <div>
            <label asp-for="Price"></label>
            <input asp-for="Price" />
        </div>
        <div>
            <label asp-for="CompanyId"></label>
            <select asp-for="CompanyId" asp-items="ViewBag.Companies"></select>
        </div>
        <div>
            <input type="submit" value="Save" />
        </div>
    </div>
</form>

Тег-хелперы, используемые для создания форм, аналогичны соответствующим элементам html за тем исключением, что они добавляют дополнительную функциональность. Так, для создания формы используется класс FormTagHelper, представленный тегом form. Этот тег может принимать следующие атрибуты:

• asp-controller: указывает на контроллер, которому предназначен запрос

• asp-action: указывает на действие контроллера

• asp-area: указывает на название области, в которой будет вызываться контроллер для обработки формы

• asp-antiforgery: если имеет значение true, то для этой формы будет генерироваться antiforgery token

• asp-route: указывает на название маршрута

• asp-all-route-data: устанавливает набор значений для параметров

• asp-route-[название параметра]: определяет значение для определенного параметра

• asp-page: указывает на страницу RazorPage, которая будет обрабатывать запрос

• asp-page-handler: указывает на обработчик страницы RazorPage, который применяется для обработки запроса

• asp-fragment: указывает фрагмент, который добавляется к запрашиваемому адресу после символа #.

Например, форма:

<form asp-antiforgery="true" asp-action="Create" asp-controller="Home">

В данном случае форма будет отправлять данные методу Create котроллера Home и для формы будет генерироваться antiforgery token.

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

LabelTagHelper

LabelTagHelper использует тег label для создания метки:

<label asp-for="Name"></label>

InputTagHelper

InputTagHelper создает поле ввода:

<input asp-for="Name" />

TextAreaTagHelper

TextAreaTagHelper используется для создания многострочного текстового поля textarea. Данный хелпер применяет только атрибут asp-for:

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

SelectTagHelper

SelectTagHelper создает элемент списка:

<select asp-for="CompanyId" asp-items="ViewBag.Companies"></select>

Атрибут asp-items указывает на объект IEnumerable<SelectListItem>, который будет использоваться для наполнения списка.

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

<select asp-for="CompanyId" asp-items="ViewBag.Companies">
	<option selected="selected" disabled="disabled">Выберите компанию</option>
</select>

Работа с enum

Теперь рассмотрим, как привязать объект select к перечислению. Допустим, у нас есть такой тип enum:

public enum DayTime
{
    [Display(Name ="Утро")]
    Morning,
    [Display(Name = "День")]
    Afternoon,
    [Display(Name = "Вечер")]
    Evening,
    [Display(Name = "Ночь")]
    Night
}
public class DayTimeViewModel
{
    public DayTime Period { get; set; }
}

Для работы в представлении определена модель DayTimeViewModel, которая будет хранить выбранное значение DayTime.

В контроллере определим пару методов, для отправки представления и получения выбранного значения:

public IActionResult Index()
{
    return View();
}
[HttpPost]
public IActionResult Index(DayTimeViewModel model)
{
    return Content(model.Period.ToString());
}

И определим представление Index.cshtml:

@using TagHelpersApp.Models
@model DayTimeViewModel

<form method="post">
    <div>
        <div>
            <label asp-for="Period">Время суток</label>
            <select asp-for="Period" asp-items="Html.GetEnumSelectList<DayTime>()"></select>
        </div>
        <div>
            <input type="submit" value="Save" />
        </div>
    </div>
</form>

Для наполнения списка мы можем применить статический метод GetEnumSelectList<TEnum>() класса HtmlHelper.

В итоге получится выпадающий список со значениями из перечисления:

В качестве альтернативы можно создавать список с помощью конструктора SelectList:

<div>
    <label asp-for="Period">Время суток</label>
    <select asp-for="Period" asp-items="@new SelectList(Enum.GetNames(typeof(DayTime)))"></select>
</div>