Add data attributes in Razor view with HTML helper method

With HTML 5 and JS frameworks heavily using data attributes within HTML tags, Razor views could cause you a headache without this little tip for attributes.

For example Data attributes have a syntax like « data-* ». If you add the hyphen within the name of an attribute in your anonymous class, Razor engine will interprets it simply as a minus sign … and won’t compile !

To add a Data attribute (or any other attribute with a hyphen within the name) within an HTML helper, you should replace the hyphen with an underscore. Hence, Razor engine will understand this and converts it to a hyphen in the HTML output.

@Html.DropDownList("Country", ViewData["Countries"] as SelectList, new { @class = "selectpicker", data_style = "btn-form-control" })

The HTML output will be:

<select id=”Country” name=”Country” class="selectpicker" data-style=”btn-form-control” />

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.