Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7
Для вывода контента в представлении мы можем использовать стандартные html-элементы, которые позволяют создавать блоки, списки, таблицы и т.д. Но кроме собственно html-элементов для создания разметки мы можем использовать специальные методы - html-хелперы. Вообще helper можно перевести с английского как "вспомогательный метод". И фактически html-хелперы представляют собой вспомогательные методы, цель которых - генерация html-разметки.
Для создания простейшего html-хелпера возьмем проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller) и добавим в него папку App_Code. Затем в эту папку добавим новый класс ListHelper:
using Microsoft.AspNetCore.Html; using Microsoft.AspNetCore.Mvc.Rendering; namespace HtmlHelpersApp.App_Code { public static class ListHelper { public static HtmlString CreateList(this IHtmlHelper html, string[] items) { string result = "<ul>"; foreach (string item in items) { result = $"{result}<li>{item}</li>"; } result = $"{result}</ul>"; return new HtmlString(result); } } }
В новом классе хелпера определен один статический метод CreateList
, принимающий в качестве первого параметра объект, для которого
создается метод. Так как данный метод расширяет функциональность html-хелперов, которые представляет интерфейс
Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper, то именно объект этого типа и передается в данном случае в качестве первого
параметра. Второй параметр метода CreateList - массив строк-значений, которые потом будут выводиться в списке.
В самом методе просто пробегаемся по массиву строк и формируем из них разметку html в виде строки. Результатом метода является объект HtmlString, который в конструкторе получает разметку html в виде строки.
Этот очень простой метод уже может упростить работу с разметкой. Рассмотрим его использование. Допустим, нам надо в представлении вывести массив строк в списке:
@{ ViewData["Title"] = "Home Page"; } @{ string[] cities = new string[] { "Лондон", "Париж", "Берлин" }; string[] countries = new string[] { "Великобритания", "Франция", "Германия" }; } @using HtmlHelpersApp.App_Code <h3>Города</h3> @Html.CreateList(cities) <br /> <h3>Страны</h3> <!-- или можно вызвать так --> @ListHelper.CreateList(Html, countries)
Поскольку html-хелпер представляет метод расширения для объекта IHtmlHelper, то для его применения нам достаточно написать Html.CreateList
и передать в метод необходимые параметры. Либо мы можем вызвать его как метод класса, в котором он определен: ListHelper.CreateList
И теперь, если мы захотим создать список <ul>
, нам достаточно будет написать одну строку с вызовом хелпера, передав ему массив:
При отсутствии подобного хелпера, то нам бы пришлось по сути дублировать один и тот же html-код для создания списка. Однако этот хелпер еще довольно простой, а если нам приходится создавать по сто раз более сложную, но однотипную разметку html, тогда хелперы окажутся еще более полезными.
Для создания html-тегов в хелпере мы можем использовать класс Microsoft.AspNetCore.Mvc.Rendering.TagBuilder. Так, перепишем код хелпера следующим образом:
using Microsoft.AspNetCore.Html; using Microsoft.AspNetCore.Mvc.Rendering; using System.Text.Encodings.Web; namespace HtmlHelpersApp.App_Code { 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"); var writer = new System.IO.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
Свойство Attributes позволяет управлять атрибутами элемента
Метод MergeAttribute() позволяет добавить к элементу один атрибут
Метод AddCssClass() позволяет добавить к элементу класс css
Метод WriteTo() позволяет создать из элемента и его внутреннего содержимого строку при помощью объектов TextWriter и HtmlEncoder.
В итоге мы получим тот же самый список, что и ранее.