Использование HTML5 data-* атрибутов в ASP.NET MVC
Быстрый ответ
В ASP.NET MVC предпочтительнее использовать подчёркивания в атрибутах data-*
, когда вы работаете на языке C#, чтобы гарантировать их правильную интерпретацию:
C# модель:
public string Data_my_attr { get; set; } // Тире не поддерживаются в C#
Представление Razor:
@Html.TextBoxFor(m => m.Data_my_attr, new { data_my_attr = "value" }) // Подчеркивания трансформируются в тире
В результате получаем:
<input data-my-attr="value" ... /> // В HTML применяются тире!
Razor автоматично преобразует подчёркивания в тире при работе с HTML.
Перевод имен атрибутов: из подчёркиваний в тире
В ASP.NET MVC версии 1 использование тире в именах атрибутов было ограничено, проще было использовать подчёркивания. Но это ограничение можно обойти, создав статический метод или определённый HTML-хелпер, который преобразует подчёркивания в тире.
Улучшение взаимодействия Razor с тире
В ASP.NET MVC подчёркивания можно автоматически заменить на тире следующим образом:
public static IDictionary<string, object> ConvertUnderscoresToDashes(IDictionary<string, object> htmlAttributes)
{
// Заменяем "_" на "-" в пульте управления 📖
return htmlAttributes.ToDictionary(kvp => kvp.Key.Replace("_", "-"), kvp => kvp.Value);
}
Указанное преобразование можно применить при рендере элементов управления:
@Html.TextBoxFor(m => m.Data_my_attr, ConvertUnderscoresToDashes(new { data_my_attr = "value" }))
Помощь Razor в принятии тире – создаём специальный хелпер
Специфический HTML-хелпер выступает посредником в разрешении конфликта между "_" и "-":
public static MvcHtmlString TextBoxForWithDashes<TModel, TProperty>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TProperty>> expression,
object htmlAttributes)
{
// Наводим гармонию между "_" и "-"
var attributesWithDashes = ConvertUnderscoresToDashes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
return htmlHelper.TextBoxFor(expression, attributesWithDashes);
}
Теперь этот метод можно практично использовать в шаблоне Razor:
@Html.TextBoxForWithDashes(m => m.Data_my_attr, new { data_my_attr = "value" }) // Дипломатия в действии!
Преодолеваем JavaScript преграды с помощью data-атрибутов
HTML5 data-атрибуты выполняют функцию связующего звена между фронтэндом и Backend-ом. Главное — гарантировать использование подчёркиваний в коде ASP.NET MVC, которые в HTML будут конвертированы в тире, что обеспечивает ясность в JavaScript.
Работа с data-атрибутами напрямую в JavaScript
Свойство dataset
в JavaScript предоставляет простой доступ к data-*
атрибутам:
let element = document.getElementById('my-element');
console.log(element.dataset.myAttr); // "Привет, data-my-attr!"
Визуализация
Атрибуты data-* играют важную роль, будучи связующим звеном между HTML на фронтенде и бэкенд-кодом.
На полке (📚🔖): [data-author-name, data-book-year, data-genre-sci-fi]
В ASP.NET MVC эти метки должны подчиняться определённым правилам именования:
Было (❌): [data-author-name]
Стало (✅): [dataAuthorName]
Давайте внесём ещё один шаг, чтобы упростить этот процесс:
@Html.DataAttribute("authorName", "Жюль Верн") // Правильный подход в ASP.NET MVC
Таким образом можно адаптировать имена меток на уровне ASP.NET MVC.
Чистый код с атрибутом DisplayName
Упорядочивайте код и улучшайте его читаемость, добавляя псевдонимы к свойствам модели:
[DisplayName("data-my-attr")]
public string DataMyAttr { get; set; }
Позвольте Razor справиться с дальнейшей обработкой:
@Html.TextBoxFor(m => m.DataMyAttr)
Оставайтесь преданными своей сутности при работе со старыми версиями ASP.NET
Если вы обязаны работать со старыми версиями ASP.NET, вам придётся проявить изобретательность и искать обходные пути.
Чрезвычайное решение с атрибутами класса
Используйте классы для передачи пользовательских данных там, где это возможно:
<div class="@Model.DataAttrValue">Некоторый контент</div>
Значение можно извлечь на стороне клиента, если передача данных критически важна, но ограничена техническими возможностями.
Полезные материалы
- HTML Global data-* Attributes — обзор от W3Schools, демонстрирующий использование универсальных data-атрибутов в HTML.
- Using data attributes – Learn web development | MDN — руководство и примеры использования data-атрибутов в HTML, предоставляемые MDN Web Docs.
- HTMLElement: dataset property – Web APIs | MDN — документация MDN, разъясняющая использование data-атрибутов в JavaScript.
- html – Attach event listener through javascript to radio button – Stack Overflow — обсуждения на Stack Overflow, раскрывающего детали обработки событий в JavaScript, связанных с data-атрибутами.
- How do I use dashes in HTML 5 data attributes in Razor view engine – Stack Overflow — советы от сообщества Stack Overflow по использованию тире в data-атрибутах при работе с Razor в ASP.NET MVC.