Как добавить атрибуты данных в элемент HTML в ASP.NET MVC?

Question

Я узнал несколько минут назад , что добавление атрибутов данных - хороший способ добавить пользовательскую информацию в элементы HTML. Поэтому я попытался сделать так:

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

Но это заканчивается синтаксической ошибкой. Как я могу определить пользовательские атрибуты данных?

EDIT:

Я вижу, что могу добиться этого эффекта, используя:

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

Но это не выглядит ... ммм ... чистым! Есть ли лучший способ сделать это?

Answer 1

Используйте подчеркивание вместо тире.

new { data_myid = m.ID }

Этот определенно работает в MVC3 (другие версии не проверялись). Подчеркивание будет преобразовано в тире при рендеринге HTML.

EDIT

Это работает и в последних версиях MVC.

Answer 2

Я не вижу способа заставить объявление анонимного типа принять data-myid, поскольку это не является допустимым именем свойства в C #. Одним из вариантов может быть создание новой перегрузки, которая принимает дополнительный параметр dataAttributes и добавляет data- к именам для вас ...

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

    }
}

Затем вы можете добавить атрибут data-myid с помощью

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

Тем не менее, вам остается создавать эту перегрузку для любых других методов, для которых вы хотите принимать атрибуты данных, что является проблемой. Вы можете обойти это, переместив логику в

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

и назовите его

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

Answer 3

Я думаю, вам придется создать своего собственного помощника, чтобы сделать это для вас. Я не могу найти способ сделать это непосредственно в представлении.

Answer 4

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

Результат:

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

Я не уверен, в чем твоя проблема. Может иметь какое-то отношение к "-" в имени свойства вашего анонимного типа.

---

Да, компилятору не нравится имя вашего атрибута. Из комментариев, чтобы добавить html5-атрибуты данных, вам придется использовать словарь или создать другое расширение, которое упрощает создание словарей.