Jak dodać atrybuty danych do elementu html w ASP.NET MVC?

Question

Dowiedziałem się, few minutes ago, że dodanie atrybutów danych jest dobrym sposobem na dodanie niestandardowych informacji do elementów HTML. Więc próbowałem zrobić tak:

<%= Html.TextBox ("textBox", "Value", new { data-myid = m.ID })%> 

Ale kończy się to błędem składni. Jak mogę zdefiniować niestandardowe atrybuty danych?

EDIT:

widzę, że mogę osiągnąć ten efekt za pomocą:

<%= Html.TextBox ("textBox", "Value", new Dictionary<string, object> {{ "data-myid", m.ID }})%> 

Ale to nie wygląda ... hmm ... czyste! Czy istnieje lepszy sposób to zrobić?

Answer 1

użyć podkreślenia zamiast myślnika.

new { data_myid = m.ID }

Ten zdecydowanie działa w MVC3 (nie sprawdziłem inne wersje). Znak podkreślenia zostanie przekonwertowany na myślnik podczas renderowania HTML.

Answer 2

<%= Html.TextBox ("myTextBox", "", 
     new { @class="redText", title="Enter red text here"})%> 

skutkuje:

<input type="text" id="myTextBox" class="redText" title="Enter red text here" /> 

Nie jestem pewien, co jest Twój problem. Może mieć coś wspólnego z "-" w nazwie własności twojego anonimowego typu.

---

Tak, kompilator nie podoba się nazwa atrybutu. Z komentarzy, aby dodać atrybuty danych html5, musisz użyć słownika lub utworzyć inne rozszerzenie, które upraszcza budowę słowników.

Answer 3

Myślę, że będziesz musiał stworzyć własnego pomocnika, aby zrobić to za Ciebie. Nie mogę znaleźć sposobu na zrobienie tego bezpośrednio w widoku.

Answer 4

Nie widzę żadnego sposobu uzyskania anonimowej deklaracji typu, aby zaakceptować data-myid, ponieważ nie jest to poprawna nazwa właściwości w języku C#. Jedną z możliwości byłoby, aby utworzyć nowy przeciążenie, że trwa dodatkowy dataAttributes parametr, a poprzedza data- do nazw dla Ciebie ...

using System.ComponentModel; 
using System.Web.Mvc; 
using System.Web.Mvc.Html; 
using System.Web.Routing; 

static class TextBoxExtensions 
{ 
    public static string TextBox(this HtmlHelper htmlHelper, string name, object value, object htmlAttributes, object dataAttributes) 
    { 
     RouteValueDictionary attributes = new RouteValueDictionary(htmlAttributes); 
     attributes.AddDataAttributes(dataAttributes); 

     return htmlHelper.TextBox(
      name, 
      value, 
      ((IDictionary<string, object>)attributes); 
    } 

    private static void AddDataAttributes(this RouteValueDictionary dictionary, object values) 
    { 
     if (values != null) 
     { 
      foreach (PropertyDescriptor descriptor in TypeDescriptor.GetProperties(values)) 
      { 
       object obj2 = descriptor.GetValue(values); 
       dictionary.Add("data-" + descriptor.Name, obj2); 
      } 
     } 

    } 
} 

Następnie można dodać atrybut data-myid z

<%= Html.TextBox ("textBox", "Value", 
     new { title = "Some ordinary attribute" }, 
     new { myid = m.ID }) %> 

jednak , który pozostawia cię do stworzenia tego przeciążenia na jakichkolwiek innych metodach, które chcesz zaakceptować atrybutów danych, co jest uciążliwe. Można obejść, że przesuwając logikę do

public static IDictionary<string,object> MergeDataAttributes(
    this HtmlHelper htmlHelper, 
    object htmlAttributes, 
    object dataAttributes) 

i nazywają go jako

<%= Html.TextBox ("textBox", "Value", 
     Html.MergeDataAttributes(new { title = "Some ordinary attribute" }, new { myid = m.ID })) %>