How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

Translating attribute names: underscores to dashes

ASP.NET MVC 1 does not allow dashes in attribute names, instead preferring underscores. We can use a workaround by creating a static method or a custom HTML helper to replace underscores with dashes.

Quenching Razor's thirst for dashes

ASP.NET MVC will automatically replace underscores with dashes

public static IDictionary<string, object> ConvertUnderscoresToDashes(IDictionary<string, object> htmlAttributes)
{
    // As straightforward as a guy returning a library book 📖
    return htmlAttributes.ToDictionary(kvp => kvp.Key.Replace("_", "-"), kvp => kvp.Value);
}


When rendering controls, use this method to put the dash back to where it belongs:

@Html.TextBoxFor(m => m.Data_my_attr, ConvertUnderscoresToDashes(new { data_my_attr = "value" }))


Convince Razor to accept dashes - Create a custom helper

A custom HTML helper is the diplomat who can resolve the "_ vs -" conflict for us:

public static MvcHtmlString TextBoxForWithDashes<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    object htmlAttributes)
{
    // Handling the peace treaty between "_" and "-"
    var attributesWithDashes = ConvertUnderscoresToDashes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
    return htmlHelper.TextBoxFor(expression, attributesWithDashes);
}


Make use of this peacekeeper in the view:

@Html.TextBoxForWithDashes(m => m.Data_my_attr, new { data_my_attr = "value" }) // Diplomacy works!


Bridge the JavaScript barrier using data attributes

HTML5 data attributes act as the translator between your front-end and back-end. Ensure these translators are effective by using underscores in ASP.NET MVC that get converted back to dashes in HTML for JavaScript to understand.

Talking directly to data attributes in JavaScript

The dataset property in JavaScript is our secret decoder ring 🕵️‍♂️ to access the data-* attributes:

let element = document.getElementById('my-element');
console.log(element.dataset.myAttr); // "Ahoy there, data-my-attr!"


Playing it clean with the DisplayName attribute

ENSURE readable and clean code by adding nicknames to your model properties.

[DisplayName("data-my-attr")]
public string DataMyAttr { get; set; }


Let Razor take care of the rest:

@Html.TextBoxFor(m => m.DataMyAttr)


Holding the line with older ASP.NET versions

When locked into older frameworks of ASP.NET, think out of the box with workaround solutions.

Class attributes: A fallback option?

Consider using class for passing custom data:

<div class="@Model.DataAttrValue">Some content</div>


Extract the value on the front-end like a valued treasure, when passing data items is crucial but constraint.