Wie Sie Datenattribute zum HTML-Element in ASP.NET MVC hinzufügen?

Question

Ich habe gelernt, few minutes ago, dass das Hinzufügen von Datenattribute ist eine nette Möglichkeit, benutzerdefinierte Informationen zu HTML-Elementen hinzuzufügen. Also habe ich versucht, so zu tun:

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

Aber es endet als Syntaxfehler. Wie kann ich benutzerdefinierte Datenattribute definieren?

EDIT:

Ich sehe, dass ich mit diesem Effekt erreichen kann:

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

Aber das sieht nicht ... umm ... sauber! Gibt es einen besseren Weg, dies zu tun?

Answer 1

Verwenden Sie ein statt einem Bindestrich unterstreichen.

new { data_myid = m.ID }

Diese definitiv in MVC3 arbeitet (überprüft nicht andere Versionen). Der Unterstrich wird in einen Bindestrich konvertiert, wenn der HTML-Code gerendert wird.

Answer 2

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

Ergebnisse in:

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

bin ich nicht sicher, was das Problem ist. Könnte etwas mit dem "-" im Eigenschaftsnamen Ihres anonymen Typs zu tun haben.

---

Ja, der Compiler mag Ihren Attributnamen nicht. Um HTML5-Datenattribute hinzuzufügen, müssen Sie aus den Kommentaren das Wörterbuch verwenden oder eine andere Erweiterung erstellen, die die Konstruktion der Wörterbücher vereinfacht.

Answer 3

Ich denke, Sie müssen Ihren eigenen Helfer erstellen, um dies für Sie zu tun. Ich finde keinen Weg, dies direkt in der Ansicht zu tun.

Answer 4

Ich kann keine Möglichkeit sehen, eine anonyme Typdeklaration zu akzeptieren data-myid, da das ist kein gültiger Eigenschaftenname in C#. Eine Möglichkeit wäre, eine neue Überlastung zu schaffen, die einen zusätzlichen dataAttributes Parameter übernimmt, und prepends data- den Namen für Sie ...

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

    } 
} 

Dann können Sie ein data-myid Attribut mit

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

fügen jedoch Das lässt Sie diese Überladung für alle anderen Methoden erstellen, die Sie Datenattribute akzeptieren möchten, was ein Schmerz ist. Sie könnten um das erhalten, indem die Logik zu einem es

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

bewegen und rufen als

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