Использование HTML5 data-* в ASP.NET MVC с методом TextBoxFor

Быстрый ответ

Для того чтобы внедрить data-* атрибуты, включите анонимный объект в метод @Html.TextBoxFor:

@Html.TextBoxFor(model => model.Property, new { data_custom = "value" }) // ASP.NET MVC автоматически превращает подчеркивания в дефисы

В результате получаем:

<input type="text" data-custom="value" ...> // Заметим, что подчеркивание стало дефисом

Если атрибут совпадает с ключевым словом в C#, используйте @: @data_date для data-date.

Преобразование подчеркиваний в дефисы

В ASP.NET MVC вы можете воспользоваться конвенцией, которая позволяет просто преобразовать подчеркивания в дефисы. Это соответствует правилам именования HTML5 для data-атрибутов:

@Html.TextBoxFor(model => model.Username, new { data_user_id = "12345", data_sign_up_date = DateTime.Now.ToString("yyyy-MM-dd") }) 
// Еще одина прекрасная особенность ASP.NET MVC...

Сгенерированный HTML будет выглядеть так:

<input type="text" data-user-id="12345" data-sign-up-date="2022-01-01" ...> 
// Замечаем, что в C# были подчеркивания, а в HTML они стали дефисами!

Динамические URL в data-атрибутах

Use Url.Action для назначения динамических значений к data-атрибутам, это весьма удобно для определения обратных ссылок или AJAX endpoint-ов:

@Html.TextBoxFor(model => model.ReturnUrl, new { data_return_url = Url.Action("LoginSuccess", "Account") })
// Url.Action для вашего удобства!

В итоге получаем:

<input type="text" data-return-url="/Account/LoginSuccess" ...> 
// Возможно удобное возвращение пользователя к экшену LoginSuccess!

Поддержка старых версий MVC

В MVC версиях до 3, чтобы добавить data-атрибуты, нужно использовать Dictionary<string, object>:

@Html.TextBoxFor(model => model.Property, new Dictionary<string, object> { { "data-date", DateTime.Now.ToShortDateString() } })
// Надежный старый словарь, который всегда приходит на помощь!

Этот подход, хоть он и кажется немного многословным, но дает полный контроль над HTML атрибутами.

Визуализация

Представьте TextboxFor как чемодан 🧳. Вы можете прикрепить к нему маркировочные ярлыки (data-*) 🏷️:

@Html.TextBoxFor(model => model.Property, new { @class = "input-class", data_customtag = "yourValue" }) // В ASP.NET MVC никакой дополнительной платы за багажные теги!

Специальная обработка в ASP.NET MVC обеспечивает гарантию, что ваши данные будут правильно идентифицированы и обработаны. Все готово как следует заинтересовать JavaScript!

До: 🧳 (Простой чемодан)
После: 🧳 + 🏷️ (Чемодан с метками, готов к отправке!) // Удивительно продуктивный груз!

Эффективность валидации благодаря data-*

Чтобы включить клиентскую валидацию, используйте data-* атрибуты:

// Мы добавляем валидацию на профессиональном уровне с помощью data-атрибутов!
@Html.TextBoxFor(model => model.Age, new { data_val_required = "Возраст обязателен.", data_val_range_min = "18", data_val_range_max = "100" })

Для качественной проверки форм используйте плагины валидации jQuery, минуя обращение к серверу.

Работа с JSON в data-атрибутах

Сериализуйте JSON объекты для прямого использования в JavaScript:

// Да здравствует JSON, который поставляет все нам на блюдце!
@Html.TextBoxFor(model => model.Property, new { data_model_json = Json.Encode(Model.MyObject) })

Важно: при использовании больших объемов данных могут возникнуть проблемы производительности.

Каскадные выпадающие списки основанные на data-атрибутах

Используйте data-атрибуты для загрузки каскадных выпадающих списков:

// Управляем выбором города с помощью выпадающего списка!
@Html.DropDownListFor(model => model.State, StateList, 
    new { data_url = Url.Action("GetCitiesByState"), data_target = "#CityDropdown" })

Для выбранного штата используйте AJAX запрос и заполняйте список городов динамически.

Основные рекомендации и приемы

Производительность – главный приоритет

Обращайте внимание на размер страницы. Используйте data-* атрибуты осторожно, только тогда, когда они действительно необходимы.

Подробнее об этом расскажет наш спикер на видео

Экранирование HTML

Всегда кодируйте динамический контент внутри data-* атрибутов для предотвращения XSS-атак.

Соблюдайте соглашения

Придерживайтесь единой системы именования в вашем проекте. Это облегчит поддержку и улучшит читаемость кода.

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

1. Использование data-атрибутов – Изучение веб-разработки | MDN — исчерпывающее руководство по пониманию и использованию data-* атрибутов в HTML5.
2. HTML-хелперы в ASP.Net MVC – TutorialTeacher — объяснение принципов использования HTML-хелперов в ASP.NET MVC, включая TextboxFor.
3. Глобальные data-* атрибуты в HTML – W3Schools — информация о применении пользовательских data-атрибутов в HTML и их пользе.
4. Динамические против строго типизированных представлений | Microsoft Learn — разбор вопроса о правильном использовании HTML атрибутов в представлениях ASP.NET MVC.
5. Полное руководство по data-атрибутам | CSS-Tricks — исследование реальных примеров применения и лучших практик использования HTML5 data-* атрибутов.