Использование 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>

Значение можно извлечь на стороне клиента, если передача данных критически важна, но ограничена техническими возможностями.

Полезные материалы

1. HTML Global data-* Attributes — обзор от W3Schools, демонстрирующий использование универсальных data-атрибутов в HTML.
2. Using data attributes – Learn web development | MDN — руководство и примеры использования data-атрибутов в HTML, предоставляемые MDN Web Docs.
3. HTMLElement: dataset property – Web APIs | MDN — документация MDN, разъясняющая использование data-атрибутов в JavaScript.
4. html – Attach event listener through javascript to radio button – Stack Overflow — обсуждения на Stack Overflow, раскрывающего детали обработки событий в JavaScript, связанных с data-атрибутами.
5. How do I use dashes in HTML 5 data attributes in Razor view engine – Stack Overflow — советы от сообщества Stack Overflow по использованию тире в data-атрибутах при работе с Razor в ASP.NET MVC.