HTML-хелперы
Для вывода содержимого в представлении можно применять стандартные html-элементы, которые позволяют создавать блоки, списки, таблицы и т.д. Но кроме собственно html-элементов в ASP.NET Core MVC для создания разметки можно использовать специальные методы — html-хелперы . Вообще helper можно перевести с английского как «вспомогательный метод». И фактически html-хелперы представляют собой вспомогательные методы, цель которых — генерация html-разметки.
Для создания простейшего html-хелпера в проект ASP.NET Core добавим новый класс ListHelper :
В новом классе хелпера определен один статический метод CreateList , принимающий в качестве первого параметра объект, для которого создается метод. Так как данный метод расширяет функциональность html-хелперов, которые представляет интерфейс Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper , то именно объект этого типа и передается в данном случае в качестве первого параметра. Второй параметр метода CreateList — массив строк-значений, которые потом будут выводиться в списке.
В самом методе просто пробегаемся по массиву строк и формируем из них разметку html в виде строки. Результатом метода является объект HtmlString , который в конструкторе получает разметку html в виде строки.
Этот очень простой метод уже может упростить работу с разметкой. Рассмотрим его использование. Допустим, нам надо в представлении вывести массив строк в списке:
@< string[] cities = new string[] < "Лондон", "Париж", "Берлин" >; string[] countries = new string[] < "Великобритания", "Франция", "Германия" >; > @using MvcAppГорода
@Html.CreateList(cities)Страны
@ListHelper.CreateList(Html, countries)
Поскольку html-хелпер представляет метод расширения для объекта IHtmlHelper, то для его применения нам достаточно написать Html.CreateList и передать в метод необходимые параметры. Либо мы можем вызвать его как метод класса, в котором он определен: ListHelper.CreateList
- , нам достаточно будет написать одну строку с вызовом хелпера, передав ему массив:
При отсутствии подобного хелпера, то нам бы пришлось по сути дублировать один и тот же html-код для создания списка. Однако этот хелпер еще довольно простой, а если нам приходится создавать по сто раз более сложную, но однотипную разметку html, тогда хелперы окажутся еще более полезными.
TagBuilder
Для создания html-тегов в хелпере мы можем использовать класс Microsoft.AspNetCore.Mvc.Rendering.TagBuilder . Так, перепишем код хелпера следующим образом:
using Microsoft.AspNetCore.Html; // для HtmlString using Microsoft.AspNetCore.Mvc.Rendering; // для IHtmlHelper using System.Text.Encodings.Web; // для HtmlEncoder namespace MvcApp < public static class ListHelper < public static HtmlString CreateList(this IHtmlHelper html, string[] items) < TagBuilder ul = new TagBuilder("ul"); foreach (string item in items) < TagBuilder li = new TagBuilder("li"); // добавляем текст в li li.InnerHtml.Append(item); // добавляем li в ul ul.InnerHtml.AppendHtml(li); >ul.Attributes.Add("class", "itemsList"); using var writer = new StringWriter(); ul.WriteTo(writer, HtmlEncoder.Default); return new HtmlString(writer.ToString()); > > > В конструктор TagBuilder передается элемент, для которого создается тег. TagBuilder имеет ряд свойств и методов, которые можно использовать:
- Свойство InnerHtml позволяет установить или получить содержимое тега в виде строки. Чтобы манипулировать этим свойством, можно вызвать один из методов:
- Append(string text) : добавление строки теста внутрь элемента
- AppendHtml(IHtmlContent html) : добавление в элемент кода html в виде объекта IHtmlContent — это может быть другой объект TagBuilder
- Clear() : очистка элемента
- SetContent(string text) : установка текста элемента
- SetHtmlContent(IHtmlContent html) : установка внутреннего кода html в виде объекта IHtmlContent
В итоге мы получим тот же самый список, что и ранее.
Html добавить asp net
Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Хотя мы можем сами написать любой требуемый хелпер, но фреймворк MVC уже предоставляет большой набор встроенных html-хелперов, которые позволяют генерировать ту или иную разметку, главным образом, для работы с формами. Поэтому в большинстве случаев не придется создавать свои хелперы, и можно будет воспользоваться встроенными.
Хелпер Html.BeginForm
Для создания форм мы вполне можем использовать стандартные элементы html, например:
Это обычная html-форма, которая по нажатию на кнопку отправляет все введенные данные запросом POST на адрес /Home/Buy. Встроенный хелпер BeginForm/EndForm позволяет создать ту же самую форму:
@using(Html.BeginForm("Buy", "Home", FormMethod.Post)) <
>Введите свое имя
Введите адрес :
Метод BeginForm принимает в качестве параметров имя метода действия и имя контроллера, а также тип запроса. Данный хелпер создает как открывающий тег
. Поэтому при рендеринге представления в выходной поток у нас получится тот же самый html-код, что и с применением тега form. Поэтому оба способа идентичны.
Здесь есть один момент. Если у нас в контроллере определены две версии одного метода — для методов POST и GET, например:
[HttpGet] public ActionResult Buy() < return View(); >[HttpPost] public string Buy(Purchase purchase)То есть фактически вызов страницы с формой и отправка формы осуществляется одним и тем же действием Buy. В этом случае можно не указывать в хелпере 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("Buy", "Home", FormMethod.Post)) <Введите свое имя:
@Html.TextBox("Person", "Введите имя")Введите адрес :
@Html.TextBox("Address", "Введите адрес") >Мы получим тот же результат:
Html.TextArea
Хелпер TextArea используется для создания элемента , который представляет многострочное текстовое поле. Результатом выражения @Html.TextArea(«text», «привет
мир»)будет следующая html-разметка:
Обратите внимание, что хелпер декодирует помещаемое в него значение, в том числе и html-теги, (все хелперы декодируют значения моделей и значения атрибутов). Другие версии хелпера TextArea позволяют указать число строк и столбцов, определяющих размер текстового поля.
@Html.TextArea("text", "привет
мир", 5, 50, null)Этот хелпер сгенерирует следующую разметку:
Html.Hidden
В примере с формой мы использовали скрытое поле input type=»hidden» , вместо которого могли бы вполне использовать хелпер Html.Hidden . Так, следующий вызов хелпера:
А при передаче переменной из ViewBag нам надо привести ее к типу string: @Html.Hidden(«BookId», @ViewBag.BookId as string)
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 может применяться для создания сразу двух элементов. Возьмем, к примеру, следующий код:
Это выражение будет генерировать следующий HTML:
То есть кроме собственно поля флажка, еще и генерируется скрытое поле. Зачем оно нужно? Дело в том, что браузер посылает значение флажка только тогда, когда флажок выбран или отмечен. А скрытое поле гарантирует, что для элемента Enable будет установлено значение даже, если пользователь не отметил флажок.
Html.Label
Хелпер Html.Label создает элемент , а передаваемый в хелпер параметр определяет значение атрибута for и одновременно текст на элементе. Перегруженная версия хелпера позволяет определить значение атрибута for и текст на метке независимо друг от друга. Например, объявление хелпера Html.Label(«Name») создает следующую разметку:
Элемент label представляет простую метку, предназначенную для прикрепления информации к элементам ввода, например, к текстовым полям. Атрибут for элемента label должен содержать ID ассоциированного элемента ввода. Если пользователь нажимает на метку, то браузер автоматически передает фокус связанному с этой меткой элементу ввода.
Html.DropDownList
Хелпер Html.DropDownList создает выпадающий список, то есть элемент . Для генерации такого списка нужна коллекция объектов SelectListItem , которые представляют элементы списка. Объект SelectListItem имеет свойства Text (отображаемый текст), Value (само значение, которое может не совпадать с текстом) и Selected . Можно создать коллекцию объектов SelectListItem или использовать хелпер SelectList . Этот хелпер просматривает объекты IEnumerable и преобразуют их в последовательность объектов SelectListItem . Так, код @Html.DropDownList(«countires», new SelectList(new string[] ),»Countries») генерирует следующую разметку:
Теперь более сложный пример. Выведем в список коллекцию элементов Book. В контроллере передадим этот список через ViewBag:
BookContext db = new BookContext(); public ActionResult Index()
Здесь мы создаем объект SelectList, передавая в его конструктор набор значений для списка (db.Books), название свойства модели Book, которое будет использоваться в качестве значения (Author), и название свойства модели Book, которое будет использоваться для отображения в списке. В данном случае необязательно устанавливать два разных свойства, можно было и одно установить и для значения и отображения.
Тогда в представлении мы можем так использовать этот SelectList:
@Html.DropDownList("Author", ViewBag.Books as SelectList)И при рендеринге представления все элементы SelectList добавятся в выпадающий список
Html.ListBox
Хелпер Html.ListBox , также как и DropDownList , создает элемент , но при этом делает возможным множественное выделение элементов (то есть для атрибута multiple устанавливается значение multiple ). Для создания списка, поддерживающего множественное выделение, вместо SelectList можно использовать класс MultiSelectList :
@Html.ListBox("countires", new MultiSelectList(new string[] ))Этот код генерирует следующую разметку:
С передачей одиночных значений на сервер все понятно, но как передать множественные значения? Допустим, у нас есть следующая форма:
Тогда метод контроллера мог бы получать эти значения следующим образом:
[HttpPost] public string Index(string[] countries) < string result = ""; foreach (string c in countries) < result += c; result += ";"; >return "Вы выбрали: " + result; >
Форма с несколькими кнопками
Как правило, на форме есть только одна кнопка для отправки. Однако в определенных ситуациях может возникнуть потребность, использовать более одной кнопки. Например, есть поле для ввода значения, а две кнопки указывают, надо это значение удалить или, наоборот, добавить:
@using (Html.BeginForm("MyAction", "Home", FormMethod.Post)) <
>Самое простое решение состоит в том, что для каждой кнопки устанавливается одинаковое значение атрибута name , но разное для атрибута value . А метод, принимающий форму, может выглядеть следующим образом:
[HttpPost] public ActionResult MyAction(string product, string action) < if(action=="add") < >else if(action=="delete") < >// остальной код метода >
И с помощью условной конструкции в зависимости от значения параметра action, который хранит значение атрибута value нажатой кнопки, производятся определенные действия.
