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

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
mvc3 underscore to 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

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Anonymous said...

thanks for the tip on AnonymousObjectToHtmlAttributes method. It will come handy in our project

Anonymous said...

Very, very helpful post. You saved me from completely tearing my hair out over an otherwise very confusing error. Thank you!