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

Problem ten został rozwiązany w ASP.Net MVC 3. Teraz automatycznie konwertują podkreślniki we właściwościach atrybutu html na myślniki. Mieli szczęście, ponieważ podkreślenia nie są legalne w atrybutach html, więc MVC może śmiało sugerować, że chcesz kreskę, gdy używasz podkreślenia.

Na przykład:

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

Wyrenderuje 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ę że 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ć go w ten sposób:

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

A to wyrenderuje poprawne dane - * atrybut:

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

To nawet łatwiejsze niż wszystko, co sugerowano powyżej. Atrybuty danych w MVC zawierające myślniki ( - ) są obsługiwane za pomocą podkreślenia (_).

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

W mvc 4 może być renderowane z podkreśleniem ( " _ " )

Razor:

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

Rendered Html

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

Można to zaimplementować za pomocą nowej funkcji rozszerzenia Helpera Html, która będzie następnie używana podobnie do istniejących linków do akcji.

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

Simples: -)

Edit

Trochę Więcej zapisu 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 trochę większą kontrolę nad tagiem a, który jest czasami przydatny w mocno Ajaxifikowanych stronach.

HTH

Nie lubię używać czystego tagu "a", za dużo wpisywania. Więc przychodzę z rozwiązaniem. In view it look

<%: 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 go użyć TAK:

W Mvc:

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

W Html:

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