Создание форм с помощью тег-хелперов¶
Рассмотрим, как использовать тег-хелперы, которые работают с формами.
Предположим, у нас есть модель UserBindingModel из главы 6:
public class UserBindingModel
{
[Required]
[StringLength(100)]
[Display(Name = "Your name")]
public string FirstName { get; set; }
[Required]
[StringLength(100)]
[Display(Name = "Last name")]
public string LastName { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
[Phone]
[Display(Name = "Phone number")]
public string PhoneNumber { get; set; }
}
Атрибуты
DataAnnotations, использованные для валидации модели, также используются шаблонизатором Razor в качестве метаданных, необходимых для генерации правильного HTML-кода с использованием тег-хелперов.Используем
UserBindingModel согласно рекомендациям:public class CheckoutModel : PageModel
{
[BindProperty]
public UserBindingModel Input { get; set; }
}
Используя размеченный класс, тег-хелперы и небольшое количество HTML-кода, получим примерно следующую форму:

Вот какой шаблон для этого нужен:
@page
@model CheckoutModel
@{
ViewData["Title"] = "Checkout";
}
<h1>@ViewData["Title"]</h1>
<form asp-page="Checkout">
<div class="form-group">
<label asp-for="Input.FirstName"></label>
<input class="form-control" asp-for="Input.FirstName" />
<span asp-validation-for="Input.FirstName"></span>
</div>
<div class="form-group">
<label asp-for="Input.LastName"></label>
<input class="form-control" asp-for="Input.LastName" />
<span asp-validation-for="Input.LastName"></span>
</div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input class="form-control" asp-for="Input.Email" />
<span asp-validation-for="Input.Email"></span>
</div>
<div class="form-group">
<label asp-for="Input.PhoneNumber"></label>
<input class="form-control" asp-for="Input.PhoneNumber" />
<span asp-validation-for="Input.PhoneNumber"></span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Здесь использованы:
- тег-хелпер Form для элемента
<form>: он использует маршрутизацию для определения URL-адреса для отправки формы; - тег-хелпер Label для элементов
<label>: он использует DataAnnotations для определения заголовка; - тег-хелпер Input для элементов
<input>: он использует DataAnntoations для определения типа ввода; - тег-хелпер Validation для элементов валидации
<span>: использует DataAnnotations для определения текста сообщения об ошибке валидации.
Дальше в книге приведен HTML-код, в который разворачиваются тег-хелперы, но я не буду его приводить, он очень большой.
Рассмотрим эти и другие тег-хелперы отдельно.
Тег-хелпер формы¶
Тег-хелпер метки (label)¶
Тег-хелперы input и textarea¶
Тег-хелпер раскрывающегося списка¶
Тег-хелперы сообщений валидации и сводки сообщений¶
Последнее обновление :
27 сентября 2022 г.
Дата создания : 27 сентября 2022 г.
Дата создания : 27 сентября 2022 г.