HTML-хелперы

Создание HTML-хелперов

Для вывода содержимого в представлении можно применять стандартные html-элементы, которые позволяют создавать блоки, списки, таблицы и т.д. Но кроме собственно html-элементов в ASP.NET Core MVC для создания разметки можно использовать специальные методы - html-хелперы. Вообще helper можно перевести с английского как "вспомогательный метод". И фактически html-хелперы представляют собой вспомогательные методы, цель которых - генерация html-разметки.

Для создания простейшего html-хелпера в проект ASP.NET Core добавим новый класс ListHelper:

using Microsoft.AspNetCore.Html;        // для HtmlString
using Microsoft.AspNetCore.Mvc.Rendering;   // для IHtmlHelper

namespace MvcApp
{
    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 в виде строки.

Этот очень простой метод уже может упростить работу с разметкой. Рассмотрим его использование. Допустим, нам надо в представлении вывести массив строк в списке:

@{
    string[] cities = new string[] { "Лондон", "Париж", "Берлин" };
    string[] countries = new string[] { "Великобритания", "Франция", "Германия" };
}
@using MvcApp

<h3>Города</h3>
@Html.CreateList(cities)
<br />
<h3>Страны</h3>
<!-- или можно вызвать так -->
@ListHelper.CreateList(Html, countries)

Поскольку html-хелпер представляет метод расширения для объекта IHtmlHelper, то для его применения нам достаточно написать Html.CreateList и передать в метод необходимые параметры. Либо мы можем вызвать его как метод класса, в котором он определен: ListHelper.CreateList

И теперь, если мы захотим создать список <ul>, нам достаточно будет написать одну строку с вызовом хелпера, передав ему массив:

При отсутствии подобного хелпера, то нам бы пришлось по сути дублировать один и тот же 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

• Свойство Attributes позволяет управлять атрибутами элемента

• Метод MergeAttribute() позволяет добавить к элементу один атрибут

• Метод AddCssClass() позволяет добавить к элементу класс css

• Метод WriteTo() позволяет создать из элемента и его внутреннего содержимого строку при помощью объектов TextWriter и HtmlEncoder.

В итоге мы получим тот же самый список, что и ранее.