Як використовувати тире в атрибутах data-* HTML-5 в ASP.NET MVC

Я намагаюся використовувати атрибути даних HTML5 у своєму проекті ASP.NET MVC 1. (Я новачок C # і ASP.NET MVC.)

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

"Дані-дані" у наведеному вище htmlAttributes дають таку помилку:

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

Він працює, коли я використовую data_details, але я думаю, що це потрібно починати з "data-" відповідно до специфікації.

Мої запитання:

• Чи є спосіб зробити це робочим і використовувати атрибути даних HTML5 за допомогою Html.ActionLink або подібних помічників Html?
• Чи є інший альтернативний механізм приєднання користувальницьких даних до елемента? Ці дані повинні бути оброблені пізніше JS.

Оновлення: MVC 3 та новіші версії мають вбудовану підтримку для цього. Нижче див. Високооцінену відповідь JohnnyO щодо рекомендованих рішень.

Я не думаю, що є безпосередні помічники для досягнення цього, але у мене є дві ідеї, щоб ви спробували:

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

Просто ідеї, не перевіряли.

Ця проблема була вирішена в ASP.Net MVC 3. Вони автоматично перетворюють підкреслення в властивостях html-атрибута в тире. На цей момент їм пощастило, оскільки підкреслення не є законними в атрибутах html, тому MVC може впевнено натякати на те, що ви хочете мати тире, коли використовуєте підкреслення.

Наприклад:

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

надасть це в MVC 3:

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

Якщо ви все ще використовуєте старішу версію MVC, ви можете імітувати те, що робить MVC 3, створивши цей статичний метод, який я запозичив у вихідного коду 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;
    }
}

І тоді ви можете використовувати його так:

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

і це надасть правильний атрибут data- *:

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

Це навіть простіше, ніж усе, що запропоновано вище. Атрибути даних у MVC, які включають тире (-), використовуються підкресленням (_).

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

Я бачу, Джонні вже згадував про це.

У mvc 4 Може бути відображено за допомогою підкреслення ("_")

Бритва:

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

Наданий Html

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

Ви можете реалізувати це за допомогою нової функції розширення помічника Html, яка потім буде використовуватися аналогічно існуючим 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));
}

І ви називаєте це так ...

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

Симплекс :-)

редагувати

трохи більше написання тут

Я в кінцевому підсумку використовував звичайне гіперпосилання разом із Url.Action:

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

Це гірше, але у вас є трохи більше контролю над aтегом, що іноді корисно на сильно AJAXified сайтах.

HTH

Мені не подобається використовувати чистий тег "a", занадто багато вводити текст. Тож я приходжу з рішенням. З огляду це виглядає

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

Впровадження класу 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));
    }
}

Ви можете використовувати його так:

У Mvc:

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

В Html:

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