Делаем свой HTML хелпер для ASP.NET MVC

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *