¿Cómo agregar atributos de datos al elemento html en ASP.NET MVC?

Question

Me enteré de few minutes ago que agregar atributos de datos es una buena manera de agregar información personalizada a los elementos html. Así que traté de hacer esto:

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

Pero termina como un error de sintaxis. ¿Cómo puedo definir atributos de datos personalizados?

EDIT:

veo que puedo lograr este efecto usando:

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

Pero eso no se ve ... mmm ... limpio! ¿Hay alguna forma mejor de hacer esto?

Answer 1

Utilice un subrayan en lugar de un guión.

new { data_myid = m.ID }

Este definitivamente las obras en MVC3 (no haber comprobado otras versiones). El guión bajo se convertirá en un guión cuando se represente el HTML.

Answer 2

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

resultados en:

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

no estoy seguro de lo que su tema es. Podría tener algo que ver con "-" en el nombre de propiedad de su tipo anónimo.

---

Sí, al compilador no le gusta el nombre de su atributo. A partir de los comentarios, para agregar atributos de datos html5, deberá usar el diccionario o crear otra extensión que simplifique la construcción de los diccionarios.

Answer 3

Creo que tendrá que crear su propio ayudante para hacer esto por usted. No puedo encontrar una manera de hacer esto directamente en la vista.

Answer 4

No veo ninguna forma de obtener una declaración de tipo anónimo para aceptar data-myid, ya que ese no es un nombre de propiedad válido en C#. Una opción sería la creación de una nueva sobrecarga que toma un parámetro extra dataAttributes, y antepone a los nombres data- para usted ...

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

    } 
} 

A continuación, se puede añadir un atributo data-myid con

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

Sin embargo , eso te deja para crear esa sobrecarga en cualquier otro método que quieras para aceptar atributos de datos, lo cual es un problema. Usted podría conseguir alrededor de ese moviendo la lógica a un

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

y llamarlo como

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