Adding a hyphen to the html attribute using html helpers, MVC3

The “data-*” is the custom data attributes in HTML5, it gives the ability to embed custom data attributes on all HTML elements and allows javascript to create a richer, more engaging user experience.  You can learn more about the usage of this “data-*” from here

I experience a problem of adding “data-*” to html tags by using the html helpers. I am using a datepicker from bootstrap and in the input tag, it specifies the “data-datepicker”.

<input id="SelectedDate" name = "SelectedDate" data-datepicker="datepicker" class="small" type="date" />

When I convert the html input tag to Html.TextBox helper class. It won’t pass the validation of razor engine’s syntax.

@Html.TextBoxFor(p=>p.SelectedDate, new {@class="small", type="date", data-datepicker = "datepicker"})

To work around this, you need to create a strongly typed Dictionary<string, object> and pass it to the Html.TextBox html attributes.

@Html.TextBoxFor(p => p.SelectedDate, new Dictionary<string, object> { { "class", "small" }, { "type", "date" }, { "data-datepicker", "datepicker" } })

This resolves the issue of having “data-*” custom data attributes while using mvc razor engine views.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s