Делаем Свой Html Хелпер Для Asp.net Mvc

[Sascha]

HTML хелперы играют важную роль в разработке веб приложений на основе ASP.NET MVC.

Они позволяют не только автоматизировать генерацию HTML, но и почти полностью избавляют программиста от необходимости встраивать программную логику в представление.

ASP.NET MVC имеет в своём составе достаточно мощный набор хелперов. Но, если подходящего стандартного хелпера всё-таки не найти или код написанный при помощи стандартных средств получается слишком громоздкий, можно создать собственный.


Что такое хелпер


В техническом отношении, хелпер представляет собой открытый статический метод открытого статического класса, который возвращает значение типа MvcHtmlString.

Именно в формате MvcHtmlString ASP.NET MVC и обрабатывает HTML код сгенерированный хелпером.

Простейший хелпер


В качестве примера создадим наипростейший хелпер.

Создадим в проекте папку под названием Helpers. Добавим в неё класс хелпера, в котором реализуем вывод простейшего HTML кода.

Ниже приведён исходный код хелпера.


namespace TestWebApp.Helpers
{
public static class MyHelper
{
public static MvcHtmlString HelloWorld()
{
TagBuilder result = new TagBuilder("h6");
result.SetInnerText("Hello,World!");
return new MvcHtmlString(result.ToString());
}
}
}


Для генерации HTML кода служит класс TagBuilder. Название тега, который предстоит создать, передаётся в его конструктор в виде строки. В данном случае это тег h6.

После создания тега задаём его содержимое с помощью метода SetInnerText.

Готовый HTML код необходимо передать в конструктор MvcHtmlString в виде строки. На этом собственно и завершается создание любого хелпера.

Для того чтобы воспользоваться вновь созданным хелпером, необходимо вначале импортировать пространство имён его класса. После этого хелпер становится доступен.


@using TestWebApp.Helpers
@MyHelper.HelloWorld()


Результат работы хелпреа показана на скриншоте.

Сгенерированный хелпером HTML код:


<h6>Hello,World!</h6>


Генерация сложного HTML кода


После ознакомления с общими принципами на примере простейшего хелпера, усложним задачу.

Создадим хелпер, который будет выводить массив строк оформленный в виде таблицы. Таблица будет состоять из двух столбцов: номер строки и собственно элемент массива. Вверху таблицы будет строка заголовка.

Также таблица будет иметь заданное посредством CSS визуальное оформление.

Среди стандартных хелперов нет ни одного, который формирует даже простую таблицу.

Для реализации хелпера используем средства уже знакомые нам по предыдущему примеру, а также метод InnerHtml класса TagBuilder. Последний позволяет добавить внутрь тега вложенный HTML код (в случае таблицы, как минимум, без вложенных тегов строк и ячеек не обойтись).

Ниже приведён исходный код хелпера. Его работа пояснена в комментариях к коду.


public static MvcHtmlString CreateTableList(string[] items, string cssClassName)
{
// Создаём HTML таблицу
TagBuilder tbl = new TagBuilder("table");
// Добавляем CSS класс
tbl.AddCssClass(cssClassName);
// Создаём строку заголовка
TagBuilder header = new TagBuilder("tr");
TagBuilder idHeader = new TagBuilder("th");
idHeader.SetInnerText("№/№ п.п.");
TagBuilder nameHeader = new TagBuilder("th");
nameHeader.SetInnerText("Имя");
header.InnerHtml += idHeader.ToString();
header.InnerHtml += nameHeader.ToString();
tbl.InnerHtml += header.ToString();
// Заполняем таблицу данными
for(int i=0;i<=items.Length-1;i++)
{
TagBuilder row = new TagBuilder("tr");
TagBuilder id = new TagBuilder("td");
id.SetInnerText((i+1).ToString());
TagBuilder name = new TagBuilder("td");
name.SetInnerText(items);
row.InnerHtml += id.ToString();
row.InnerHtml += name.ToString();
tbl.InnerHtml += row.ToString();
}
// Выводим таблицу
return new MvcHtmlString(tbl.ToString());
}


Далее пример использования хелпера:


@MyHelper.CreateTableList(new string[] { "Александр", "Пётр", "Сергей"}, "table .table-hover")


Результат его работы:

Таким образом, сложная операция по формированию HTML кода в представлении была заменена одной строкой с вызовом соответствующего хелпера.

Несмотря на кажущуюся сложность, данный пример всё равно ещё относительно прост. В реальных проектах вам могут предстоять значительно более серьёзные манипуляции на frontend’е. Но, с помощью хелперов можно решать задачи любой степени сложности.