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

asp.net-mvc, custom-data-attribute, html

Solution

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
<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new Dictionary<string,Object> { {"class","prev"}, {"data-details","yada"} } )%>

// 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" ) )%>

Just ideas, haven't tested it.

Problem

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

Original source

Related problems