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

Question

I am trying to use HTML5 data- attributes in my ASP NET MVC 1 project   I am a C  and ASP NET MVC newbie      lt    Html ActionLink     Previous    Search        new   keyword   Model Keyword  page   Model currPage - 1        new    class    prev   data-details    Some Details        gt    The  data-details  in the above htmlAttributes give the following error    CS0746  Invalid anonymous type member declarator  Anonymous type members    must be declared with a member assignment  simple name or member access    It works when I use data details  but I guess it need to be starting with  data-  as per the spec   My questions    Is there any way to get this working and use HTML5 data attributes with Html ActionLink or similar Html helpers   Is there any other alternative mechanism to attach custom data to an element  This data is to be processed later by JS

User · Answer

You can use it like this   In Mvc    Html TextBoxFor x  gt x Id new  data val number  10       In Html    lt input type  text  name  Id  data val number  10   gt

User · Answer

I do not like use pure  a  tag  too much typing  So I come with solution  In view it look   lt    Html ActionLink node Name   Show    Browse                        Dic Route  id   node Id   Dic New  data-nodeId   node Id     gt    Implementation of Dic class  public static class Dic       public static Dictionary lt string  object gt  New params object   attrs                var res   new Dictionary lt string  object gt             for  var i   0  i  lt  attrs Length  i   i   2              res Add attrs i  ToString    attrs i   1            return res             public static RouteValueDictionary Route params object   attrs                return new RouteValueDictionary Dic New attrs

User · Answer

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   gt  vm City  new   data bind    foo       will render this in MVC 3    lt input data-bind  foo  id  City  name  City  type  text  value      gt    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    lt    Html TextBoxFor vm   gt  vm City  Foo AnonymousObjectToHtmlAttributes new   data bind    foo        gt    and this will render the correct data-  attribute    lt input data-bind  foo  id  City  name  City  type  text  value      gt

User · Answer

I ended up using a normal hyperlink along with Url Action  as in    lt a href   lt    Url Action  Show   new   controller    Browse   id   node Id      gt     data-nodeId   lt    node Id   gt   gt     lt    node Name   gt   lt  a gt    It s uglier  but you ve got a little more control over the a tag  which is sometimes useful in heavily AJAXified sites   HTH

User · Answer

In mvc 4 Could be rendered with Underscore         Razor    Html ActionLink  Vote        new   id   item FileId     new    class    votes   data fid   item FileId  data jid   item JudgeID       Rendered Html   lt a class  votes  data-fid  18587  data-jid  9  href   Home  23 18587  gt Vote lt  a gt

User · Answer

It s even easier than everything suggested above  Data attributes in MVC which include dashes  -  are catered for with the use of underscore        lt    Html ActionLink     Previous    Search    new   keyword   Model Keyword  page   Model currPage - 1    new    class    prev   data details    Some Details        gt    I see JohnnyO already mentioned this

User · Answer

Update  MVC 3 and newer versions have built-in support for this  See JohnnyO s highly upvoted answer below for recommended solutions   I do not think there are any immediate helpers for achieving this  but I do have two ideas for you to try      1  pass dictionary instead of anonymous object  lt    Html ActionLink   back    Search       new   keyword   Model Keyword  page   Model currPage - 1       new Dictionary lt string Object gt      class   prev      data-details   yada        gt      2  pass custom type decorated with descriptor attributes public class CustomArgs       public CustomArgs  string className  string dataDetails                 DisplayName  class        public string Class   get  set         DisplayName  data-details        public string DataDetails   get  set        lt    Html ActionLink   back    Search       new   keyword   Model Keyword  page   Model currPage - 1       new CustomArgs   prev    yada       gt    Just ideas  haven t tested it

User · Answer

You can implement this with a new Html helper extension function which will then be used similarly to the existing ActionLinks   public static MvcHtmlString ActionLinkHtml5Data this HtmlHelper htmlHelper  string linkText  string actionName  string controllerName  object routeValues  object htmlAttributes  object htmlDataAttributes        if  string IsNullOrEmpty linkText                 throw new ArgumentException string Empty   linkText               var html   new RouteValueDictionary htmlAttributes       var data   new RouteValueDictionary htmlDataAttributes        foreach  var attributes in data                html Add string Format  data- 0    attributes Key   attributes Value              return MvcHtmlString Create HtmlHelper GenerateLink htmlHelper ViewContext RequestContext  htmlHelper RouteCollection  linkText  null  actionName  controllerName  new RouteValueDictionary routeValues   html        And you call it like so       lt    Html ActionLinkHtml5Data  link display    Action    Controller   new   id   Model Id    new    class  link     new   extra    some extra info        gt    Simples  -   edit  bit more of a write up here

[asp.net-mvc] How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

Examples related to asp.net-mvc

Examples related to html

Examples related to custom-data-attribute