Comment utiliser les tirets dans les attributs HTML-5 data- * dans ASP.NET MVC

J'essaie d'utiliser des attributs de données HTML5 dans mon projet ASP.NET MVC 1. (Je suis un débutant en C # et ASP.NET MVC.)

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

Les "données-détails" dans les htmlAttributes ci-dessus donnent l'erreur suivante:

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

Cela fonctionne lorsque j'utilise data_details, mais je suppose que cela doit commencer par "data-" conformément aux spécifications.

Mes questions:

• Existe-t-il un moyen de faire fonctionner cela et d'utiliser des attributs de données HTML5 avec Html.ActionLink ou des aides Html similaires?
• Existe-t-il un autre mécanisme alternatif pour attacher des données personnalisées à un élément? Ces données doivent être traitées ultérieurement par JS.

Mise à jour: MVC 3 et les versions plus récentes ont un support intégré pour cela. Voir la réponse très appréciée de JohnnyO ci-dessous pour les solutions recommandées.

Je ne pense pas qu'il existe d'auxiliaires immédiats pour y parvenir, mais j'ai deux idées à essayer:

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

Juste des idées, je ne l'ai pas testé.

Ce problème a été résolu dans ASP.Net MVC 3. Ils convertissent désormais automatiquement les traits de soulignement des propriétés d'attribut html en tirets. Ils ont eu de la chance sur celui-ci, car les traits de soulignement ne sont pas légaux dans les attributs html, donc MVC peut impliquer en toute confiance que vous souhaitez un tiret lorsque vous utilisez un trait de soulignement.

Par exemple:

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

rendra ceci dans MVC 3:

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

Si vous utilisez toujours une ancienne version de MVC, vous pouvez imiter ce que fait MVC 3 en créant cette méthode statique que j'ai empruntée au code source de 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;
    }
}

Et puis vous pouvez l'utiliser comme ceci:

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

et cela rendra l'attribut data- * correct:

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

C'est encore plus facile que tout ce qui est suggéré ci-dessus. Les attributs de données dans MVC qui incluent des tirets (-) sont pris en charge avec l'utilisation du trait de soulignement (_).

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

Je vois que JohnnyO l'a déjà mentionné.

En mvc 4 pourrait être rendu avec Underscore ("_")

Le rasoir:

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

Html rendu

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

Vous pouvez l'implémenter avec une nouvelle fonction d'extension d'assistance HTML qui sera ensuite utilisée de manière similaire aux ActionLinks existants.

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

Et vous l'appelez comme ça ...

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

Simples :-)

Éditer

un peu plus d'écrire ici

J'ai fini par utiliser un lien hypertexte normal avec Url.Action, comme dans:

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

C'est plus laid, mais vous avez un peu plus de contrôle sur le atag, ce qui est parfois utile dans les sites fortement AJAXifiés.

HTH

Je n'aime pas utiliser une balise "a" pure, trop de frappe. Je viens donc avec une solution. En vue, il semble

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

Implémentation de la classe 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));
    }
}

Vous pouvez l'utiliser comme ceci:

En Mvc:

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

En Html:

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