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.)

 <%= Html.ActionLink("« Previous", "Search",

     new { keyword = Model.Keyword, page = Model.currPage - 1},

     new { @class = "prev", data-details = "Some Details"   })%>

The "data-details" in the above HTML attributes 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 needs 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.

Answer 1

Try using the code given below:

// 1: pass dictionary instead of anonymous object

<%= Html.ActionLink( "back", "Search",

    new { keyword = Model.Keyword, page = Model.currPage - 1},

    new Dictionary<string,Object> { {"class","prev"}, {"data-details","yada"} } )%>

Or else you can use this:

// 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; }

}

<%= Html.ActionLink( "back", "Search",

    new { keyword = Model.Keyword, page = Model.currPage - 1},

    new CustomArgs( "prev", "yada" ) )%>