Что нового
  • Что бы вступить в ряды "Принятый кодер" Вам нужно:
    Написать 10 полезных сообщений или тем и Получить 10 симпатий.
    Для того кто не хочет терять время,может пожертвовать средства для поддержки сервеса, и вступить в ряды VIP на месяц, дополнительная информация в лс.

  • Пользаватели которые будут спамить, уходят в бан без предупреждения. Спам сообщения определяется администрацией и модератором.

  • Гость, Что бы Вы хотели увидеть на нашем Форуме? Изложить свои идеи и пожелания по улучшению форума Вы можете поделиться с нами здесь. ----> Перейдите сюда
  • Все пользователи не прошедшие проверку электронной почты будут заблокированы. Все вопросы с разблокировкой обращайтесь по адресу электронной почте : info@guardianelinks.com . Не пришло сообщение о проверке или о сбросе также сообщите нам.

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

Sascha

Заместитель Администратора
Команда форума
Администратор
Регистрация
9 Май 2015
Сообщения
1,064
Баллы
155
Возраст
47
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’е. Но, с помощью хелперов можно решать задачи любой степени сложности.
 
Вверх