Jak używać myślników w atrybutach danych HTML-5 * w ASP.NET MVC

Próbuję użyć atrybutów danych HTML5 w moim projekcie ASP.NET MVC 1. (Jestem początkującym użytkownikiem C # i ASP.NET MVC.)

 <%= Html.ActionLink("« Previous", "Search",
     new { keyword = Model.Keyword, page = Model.currPage - 1},
     new { @class = "prev", data-details = "Some Details"   })%>

„Szczegóły danych” w powyższym atrybucie HTML zawierają następujący błąd:

 CS0746: Invalid anonymous type member declarator. Anonymous type members 
  must be declared with a member assignment, simple name or member access.

Działa, gdy używam data_details, ale myślę, że musi zaczynać się od „data-” zgodnie ze specyfikacją.

Moje pytania:

• Czy jest jakiś sposób, aby to zadziałało i używać atrybutów danych HTML5 z Html.ActionLink lub podobnymi pomocnikami HTML?
• Czy istnieje jakiś alternatywny mechanizm dołączania niestandardowych danych do elementu? Dane te będą przetwarzane później przez JS.

Aktualizacja: MVC 3 i nowsze wersje mają wbudowaną obsługę tego. Zobacz wysoko ocenioną odpowiedź JohnnyO poniżej, aby znaleźć zalecane rozwiązania.

Nie wydaje mi się, aby byli to bezpośredni pomocnicy, ale mam dwa pomysły do ​​wypróbowania:

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

Tylko pomysły, nie przetestowałem tego.

Ten problem został rozwiązany w ASP.Net MVC 3. Teraz automatycznie konwertują podkreślenia we właściwościach atrybutów HTML na myślniki. Mają szczęście w tym, ponieważ podkreślenia nie są legalne w atrybutach HTML, więc MVC może z pewnością sugerować, że chcesz użyć myślnika, gdy używasz podkreślenia.

Na przykład:

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

renderuje to w MVC 3:

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

Jeśli nadal używasz starszej wersji MVC, możesz naśladować to, co robi MVC 3, tworząc tę ​​statyczną metodę, którą pożyczyłem z kodu źródłowego MVC3:

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

A potem możesz użyć tego w następujący sposób:

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

a to wyrenderuje poprawny atrybut data- *:

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

Jest to nawet łatwiejsze niż wszystko sugerowane powyżej. Atrybuty danych w MVC, które obejmują myślniki (-), są pokrywane za pomocą podkreślenia (_).

<%= Html.ActionLink("« Previous", "Search",
 new { keyword = Model.Keyword, page = Model.currPage - 1},
 new { @class = "prev", data_details = "Some Details"   })%>

Widzę, że JohnnyO już o tym wspomniał.

W mvc 4 Może być renderowany z podkreśleniem („_”)

Brzytwa:

@Html.ActionLink("Vote", "#", new { id = item.FileId, }, new { @class = "votes", data_fid = item.FileId, data_jid = item.JudgeID, })

Renderowany HTML

<a class="votes" data-fid="18587" data-jid="9" href="/Home/%23/18587">Vote</a>

Możesz to zaimplementować za pomocą nowej funkcji rozszerzenia pomocnika HTML, która będzie następnie używana podobnie do istniejących ActionLinków.

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

I tak to nazywacie ...

<%: Html.ActionLinkHtml5Data("link display", "Action", "Controller", new { id = Model.Id }, new { @class="link" }, new { extra = "some extra info" })  %>

Simples :-)

edytować

trochę więcej napisz tutaj

Skończyło się na użyciu normalnego hiperłącza wraz z Url.Action, jak w:

<a href='<%= Url.Action("Show", new { controller = "Browse", id = node.Id }) %>'
  data-nodeId='<%= node.Id %>'>
  <%: node.Name %>
</a>

Jest brzydszy, ale masz nieco większą kontrolę nad atagiem, co czasami jest przydatne w witrynach mocno z AJAXified.

HTH

Nie lubię używać czystego znacznika „a”, zbyt dużo pisania. Więc przychodzę z rozwiązaniem. W widoku wygląda

<%: Html.ActionLink(node.Name, "Show", "Browse", 
                    Dic.Route("id", node.Id), Dic.New("data-nodeId", node.Id)) %>

Implementacja klasy Dic

public static class Dic
{
    public static Dictionary<string, object> New(params object[] attrs)
    {
        var res = new Dictionary<string, object>();
        for (var i = 0; i < 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));
    }
}

Możesz użyć tego w następujący sposób:

W Mvc:

@Html.TextBoxFor(x=>x.Id,new{@data_val_number="10"});

W HTML:

<input type="text" name="Id" data_val_number="10"/>