Asp with html tags

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

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

Хелпер Html.BeginForm

Пусть в контроллере определены две версии одного метода Create- для методов POST и GET, например:

[HttpGet] public IActionResult Create() < return View(); >[HttpPost] public IActionResult Create(string name, int age) < return Content($"- "); >

В представлении для метода Create для создания формы ввода данных для последующей их отправки на post-версию метода Create мы вполне можем использовать стандартные элементы html, например:

Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Create. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:

@using(Html.BeginForm("Create", "Home", FormMethod.Post)) < Имя 
 
 Возраст 
 
 >

Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег

. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.

Но вызов страницы с формой и отправка формы осуществляется одним и тем же действием (как в нашем случае действием Create), то в этом случае можно не указывать в хелпере Html.BeginForm параметры:

Ввод информации

В предыдущем примере вместе с хелпером Html.BeginForm использовались стандартные элементы html. Однако набор html-хелперов содержит также хелперы для ввода информации пользователем. В MVC определен широкий набор хелперов ввода практически для каждого html-элемента. Что выбрать — хелпер или стандартный элементы ввода html, уже решает сам разработчик.

Вне зависимости от типа все базовые html-хелперы используют как минимум два параметра: первый параметр применяется для установки значений для атрибутов id и name , а второй параметр — для установки значения атрибута value

Html.TextBox

Хелпер Html.TextBox генерирует тег input со значением атрибута type равным text . Хелпер TextBox используют для получения ввода пользователем информации. Так, перепишем предыдущую форму с заменой полей ввода на хелпер Html.TextBox:

@using (Html.BeginForm("Create", "Home", FormMethod.Post)) < Имя 
@Html.TextBox("Name")
 Возраст 
@Html.TextBox("Age","", new < type="number" >)
 >

Хелпер позволяет установить ряд дополнительных параметров с помощью перегружженных версий. Так, вызов хелпера:

В качестве второго параметра устанавливает значение по умолчанию (здесь пустая строка). Третий параметр в виде анонимного объекта позволяет задать ряд атрибутов генерируемого html-элемента. Так, в данном случае мы указываем, что поле будет числовое, так как по умолчанию создаваемое поле расценивается как текстовое, то есть с атрибутом type=»text» .

В итоге мы получим практически аналогичный результат:

Html.Label

Хелпер Html.Label создает элемент , а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(«Name», «Имя») создает следующую разметку:

Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям. Атрибут for элемента label должен содержать id ассоциированного элемента ввода. Если пользователь нажимает на метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.

Html.TextArea

Хелпер TextArea используется для создания элемента , который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(«text», «привет мир»)

будет следующая html-разметка:

Обратите внимание, что хелпер декодирует помещаемое в него значение, в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.

@Html.TextArea("text", "привет мир", 5, 50, null)

Этот хелпер сгенерирует следующую разметку:

Html.Hidden

Хелпер Html.Hidden генерирует скрытое поле. Например, следующий вызов хелпера:

Html.Password

Html.Password создает поле для ввода пароля. Он похож на хелпер TextBox , но вместо введенных символов отображает маску пароля. Следующий код:

Html.RadioButton

Для создания переключателей применяется хелпер Html.RadioButton . Он генерирует элемент input со значением type=»radio» . Для создания группы переключателей, надо присвоить всем им одно и то же имя (свойство name ):

@Html.RadioButton("color", "red") красный 
@Html.RadioButton("color", "blue") синий 
@Html.RadioButton("color", "green", true) зеленый

Этот код создает следующую разметку:

Html.CheckBox

Html.CheckBox применяется для создания элемента флажка или checkbox. Например, следующий код:

будет генерировать следующий HTML:

Фактически создается два элемента — собственно флажок и скрытое поле, которое обычно помещается в конец формы и используется для отслеживания изменений значения флажка.

Html.DropDownList

Хелпер Html.DropDownList создает выпадающий список, то есть элемент . Для генерации такого списка нужна коллекция объектов SelectListItem , которые представляют элементы списка. Можно создать коллекцию объектов SelectListItem или использовать хелпер SelectList . Этот хелпер просматривает объекты IEnumerable и преобразуют их в последовательность объектов SelectListItem . Так, следующий код:

@Html.DropDownList("user", new SelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >), "Выберите пользователя")

Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected . Теперь более сложный пример. Выведем в список коллекцию элементов User:

public class User < public int Id < get; set; >public string Name < get; set; >public int Age < get; set; >>

В контроллере передадим список объектов User через ViewBag:

public IActionResult Create() < Listusers = new List < new User , new User , new User , new User , >; ViewBag.Users = new SelectList(users, "Id", "Name"); return View(); >

Здесь мы создаем объект SelectList, передавая в его конструктор набор значений (список users), название свойства модели User, которое будет использоваться в качестве значения (Id), и название свойства модели User, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было и одно установить и для значения и отображения.

Тогда в представлении мы можем так использовать этот SelectList:

@Html.DropDownList("userid", ViewBag.Users as SelectList)

И при рендеринге представления все элементы SelectList добавятся в выпадающий список

Html.ListBox

Хелпер Html.ListBox , также как и DropDownList , создает элемент , но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple ). Для создания списка, поддерживающего множественное выделение, вместо SelectList можно использовать класс MultiSelectList :

@Html.ListBox("users", new MultiSelectList(new string[] < "Tom", "Sam", "Bob", "Alice" >))

Этот код генерирует следующую разметку:

Html.GetEnumSelectList

Для создания выпадающего списка по перечислению применяется хелпер Html.GetEnumSelectList . Допустим, у нас есть следующее перечисление:

using System.ComponentModel.DataAnnotations; namespace HtmlHelpersApp.App_Code < public enum TimeOfDay < [Display(Name ="Утро")] Morning, [Display(Name = "День")] Afternoon, [Display(Name = "Вечер")] Evening, [Display(Name = "Ночь")] Night >>

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

@using HtmlHelpersApp.App_Code @using (Html.BeginForm("Create", "Home", FormMethod.Post)) < @Html.DropDownList("daytime", Html.GetEnumSelectList(typeof(TimeOfDay))) 
 >

Источник

Asp with html tags

Отдельная группа tag-хелперов позволяет создавать формы html и их элементы.

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

public record class Product(string Name, int Price, int CompanyId); public record class Company(int Id, string Name);

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

using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.Rendering; using MvcApp.Models; // пространство имен Product и Company namespace MvcApp.Controllers < public class HomeController : Controller < IEnumerablecompanies = new List < new Company( 1, "Apple"), new Company(2, "Samsung"), new Company(3, "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 $"Добавлен новый элемент: ()"; > > >

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

@using MvcApp.Models @model Product @using (Html.BeginForm()) < @Html.LabelFor(m => m.Name) @Html.EditorFor(m => m.Name)
 @Html.LabelFor(m => m.Price) @Html.EditorFor(m => m.Price)
 @Html.LabelFor(m => m.CompanyId, "Company") @Html.DropDownListFor(m => m.CompanyId, ViewBag.Companies as IEnumerable)
 >

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

@model MvcApp.Models.Product Добавление телефона
   Company

Тег-хелперы, используемые для создания форм, аналогичны соответствующим элементам 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 : указывает фрагмент, который добавляется к запрашиваемому адресу после символа #.

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

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

LabelTagHelper

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

InputTagHelper

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

TextAreaTagHelper

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

SelectTagHelper

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

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

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

Работа с enum

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

using System.ComponentModel.DataAnnotations; 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() => View(); [HttpPost] public string Index(DayTimeViewModel model) => model.Period.ToString();

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

@using MvcApp.Models @model DayTimeViewModel   Время суток

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

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

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

Источник