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
В итоге мы получим тот же самый список, что и ранее.
Вспомогательные функции тегов в ASP.NET Core
Что собой представляют вспомогательные функции тегов
Вспомогательные функции тегов позволяют серверному коду участвовать в создании и отображении HTML-элементов в файлах Razor. Например, встроенная функция ImageTagHelper может добавить номер версии к имени изображения. При каждом изменении изображения сервер генерирует новую уникальную версию изображения, поэтому клиенты гарантированно получат текущую версию изображения (вместо устаревшего кэшированного изображения). Существует множество встроенных вспомогательных функций тегов для общих задач — например, для создания форм, ссылок, загрузки ресурсов и т. д. Кроме того, огромное количество функций доступно в общедоступных репозиториях GitHub и в качестве пакетов NuGet. Вспомогательные функции тегов разрабатываются на C# и предназначены для HTML-элементов на основе имени элемента, имени атрибута или родительского тега. Например, встроенная функция LabelTagHelper может работать с HTML-элементом , если применены атрибуты LabelTagHelper . Если вы знакомы со вспомогательными элементами HTML, вспомогательные функции тегов сокращают явные переходы между HTML и C# в Razor представлениях. Во многих случаях вспомогательные методы HTML располагают альтернативными вариантами для определенной вспомогательной функции тега, но следует отметить, что вспомогательные функции тегов не заменяют вспомогательные методы HTML и для каждого вспомогательного метода HTML не существует конкретной вспомогательной функции тега. Более подробно различия описаны в разделе о сравнении вспомогательных методов HTML и вспомогательных функций тегов.
Вспомогательные функции тегов не поддерживаются в Razor компонентах. Дополнительные сведения см. в статье Компоненты Razor ASP.NET Core.
Возможности и преимущества вспомогательных функций тегов
Интерфейс разработки с поддержкой HTML
По большей части разметка с Razor использованием вспомогательных функций тегов выглядит как стандартный HTML. Интерфейсные конструкторы, имеющие опыт использования HTML,CSS/JavaScript, могут редактировать, Razor не изучая синтаксис C# Razor .
Многофункциональная среда IntelliSense для создания HTML и Razor разметки
Это резко отличается от вспомогательных средств HTML, предыдущего подхода к созданию разметки на стороне сервера в Razor представлениях. Более подробно различия описаны в разделе о сравнении вспомогательных методов HTML и вспомогательных функций тегов. Возможности среды IntelliSense объясняются в статье Поддержка IntelliSense для вспомогательных функций тегов. Даже разработчики, имеющие опыт работы с синтаксисом Razor C#, более эффективно используют вспомогательные функции тегов, чем написание разметки C# Razor .
Способ повышения производительности и возможности создания более надежного, надежного и поддерживаемого кода с использованием информации, доступной только на сервере.
Например, сложилось так, что мантра об обновлении изображений заключалась в изменении имени изображения при его изменении. Изображения нужно было обязательно кэшировать по причинам эффективности, и до тех пор, пока не менялось имя изображения, клиенты могли получать его устаревшую копию. Исторически после редактирования изображения нужно было обязательно менять его имя и обновлять каждую ссылку на него в веб приложении. Это не только очень трудоемкое, но и подвержено ошибкам (вы можете пропустить ссылку, случайно ввести неправильную строку и т. д.) Встроенный ImageTagHelper может сделать это автоматически. Функция ImageTagHelper добавляет номер версии к имени изображения, поэтому при каждом изменении изображения сервер автоматически генерирует новую уникальную версию изображения. Клиенты гарантированно получают текущее изображение. Все это достигается с помощью функции ImageTagHelper .
Большинство встроенных вспомогательных функций тегов работают со стандартными HTML-элементами и предоставляют для них атрибуты на стороне сервера. Например, элемент , используемый во многих представлениях в папке Представления/учетная запись, содержит атрибут asp-for . Этот атрибут извлекает имя свойства указанной модели в готовый для просмотра HTML-код. Рассмотрим Razor представление со следующей моделью:
public class Movie < public int ID < get; set; >public string Title < get; set; >public DateTime ReleaseDate < get; set; >public string Genre < get; set; >public decimal Price < get; set; >>Генерирует следующий HTML:
Атрибут asp-for доступен для свойства For в функции LabelTagHelper. Дополнительные сведения см. в статье Создание вспомогательных функций тегов.