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

by

This problem has been addressed in ASP.Net MVC 3. They now automatically convert underscores in html attribute properties to dashes. They got lucky on this one, as underscores are not legal in html attributes, so MVC can confidently imply that you’d like a dash when you use an underscore.

For example:

@Html.TextBoxFor(vm => vm.City, new { data_bind = "foo" })

will render this in MVC 3:

<input data-bind="foo" id="City" name="City" type="text" value="" />

If you’re still using an older version of MVC, you can mimic what MVC 3 is doing by creating this static method that I borrowed from MVC3’s source code:

public class Foo {
    public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes) {
        RouteValueDictionary result = new RouteValueDictionary();
        if (htmlAttributes != null) {
            foreach (System.ComponentModel.PropertyDescriptor property in System.ComponentModel.TypeDescriptor.GetProperties(htmlAttributes)) {
                result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
            }
        }
        return result;
    }
}

And then you can use it like this:

<%: Html.TextBoxFor(vm => vm.City, Foo.AnonymousObjectToHtmlAttributes(new { data_bind = "foo" })) %>

and this will render the correct data-* attribute:

<input data-bind="foo" id="City" name="City" type="text" value="" />

More Related Contents:

  1. SelectListItem with data-attributes
  2. Html5 Placeholders with .NET MVC 3 Razor EditorFor extension?
  3. Html5 data-* with asp.net mvc TextboxFor html attributes
  4. MVC Datatype Currency trigger numeric keypad
  5. How to link HTML5 form action to Controller ActionResult method in ASP.NET MVC 4
  6. How do I include a model with a RedirectToAction?
  7. Is there a limit to the length of HTML attributes?
  8. Proper usage of .net MVC Html.CheckBoxFor
  9. Difference between ApiController and Controller in ASP.NET MVC
  10. ASP.NET MVC – View with multiple models
  11. jQuery find element by data attribute value
  12. Razor-based view doesn’t see referenced assemblies
  13. There is no ViewData item of type ‘IEnumerable’ that has the key ‘xxx’
  14. ASP.NET: This method cannot be called during the application’s pre-start initialization stage
  15. Could not load file or assembly HRESULT: 0x80131515 (When adding controller to MVC project that has assembly references on network drive)
  16. MVC Routing Parameter Precedence
  17. How can I combine two fields in a SelectList text description?
  18. MVC 5 Seed Users and Roles
  19. Redirecting to specified controller and action in asp.net mvc action filter
  20. ASP.NET MVC – How to access Session data in places other than Controller and Views
  21. 500 Internal Server Error in ASP.NET MVC
  22. Conditional HTML Attributes using Razor
  23. Set disable attribute based on a condition for Html.TextBoxFor
  24. Why is DisplayFormat DataFormatString not working?
  25. Custom Authorize Attribute
  26. Overriding controller AuthorizeAttribute for just one action
  27. How can I use Html.Action?
  28. ASP.NET Web API, unexpected end of MIME multi-part stream when uploading from Flex FileReference
  29. MVC role-based routing
  30. How to create custom scaffold templates in ASP.NET MVC5?

Leave a Comment