Come aggiungere attributi di dati all'elemento html in ASP.NET MVC?

Question

Ho appreso few minutes ago che aggiungere gli attributi dei dati è un buon modo per aggiungere informazioni personalizzate agli elementi html. Così ho cercato di fare in questo modo:

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

ma finisce come un errore di sintassi. Come posso definire attributi di dati personalizzati?

EDIT:

vedo che riesco a ottenere questo effetto utilizzando:

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

Ma che non guarda ... umm ... pulita! C'è un modo migliore per farlo?

Answer 1

Utilizzare un sottolineano invece di un trattino.

new { data_myid = m.ID }

Questo funziona decisamente in MVC3 (non ho controllato le altre versioni). Il carattere di sottolineatura verrà convertito in un trattino quando viene eseguito il rendering dell'HTML.

Answer 2

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

risultati in:

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

non sono sicuro che cosa il vostro problema è. Potrebbe avere qualcosa a che fare con il "-" nel nome della proprietà del tipo anonimo.

---

Sì, al compilatore non piace il nome dell'attributo. Dai commenti, al fine di aggiungere attributi di dati html5, dovrai usare il dizionario o creare un'altra estensione che semplifica la costruzione dei dizionari.

Answer 3

Penso che dovrai creare il tuo aiutante per farlo per te. Non riesco a trovare un modo per farlo direttamente nella vista.

Answer 4

Non riesco a vedere alcun modo per ottenere una dichiarazione di tipo anonima per accettare data-myid, poiché non è un nome di proprietà valido in C#. Una possibilità potrebbe essere quella di creare un nuovo overload che accetta un parametro supplementare dataAttributes, e antepone data- ai nomi per voi ...

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

    } 
} 

Quindi è possibile aggiungere un attributo data-myid con

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

Tuttavia , che ti lascia creare questo sovraccarico su qualsiasi altro metodo che vuoi accettare attributi di dati, il che è un dolore. Si potrebbe ottenere in giro che spostando la logica per un

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

e chiamarlo come

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