ASP.NET MVC 3: Handling HTML 5 Attributes with Dashes

Tweet

In versions prior to ASP.NET MVC 3, you could not declare HTML attributes with dashes/hyphens (like the custom data attribute in HTML 5), without creating a custom type that handled dashes for you. Most of you, who have used custom data attributes with dashes in MVC 1 and 2, must be familiar with the Compiler Error CS0746:

Invalid anonymous type member declarator. Anonymous type members must be declared with a member assignment, simple name or member access

However in ASP.NET MVC 3, there is a trick that can be used to handle HTML attributes with dashes. Just use ‘underscores’ in your custom data attribute instead of ‘hyphens’. MVC 3 using the HTML helpers, automatically converts these underscores into dashes/hyphens

Here’s an example for you. Just declare an HTML attribute with an underscore separating two or more words, as shown below:


When the page is rendered, this underscore is automatically converted by MVC 3 to an HTML attribute with dashes

If you are interested in doing this in ASP.NET MVC 1 or 2, you just have to download the MVC 3 source code and see how is the HtmlHelper.AnonymousObjectToHtmlAttributes method implemented.

Here’s another tip about attributes that you may find useful ASP.NET MVC: Use CSS on Html.ActionLink

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.