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

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

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

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

EDIT:

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

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

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

Ответ 1

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

new { data_myid = m.ID }

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

Ответ 2

Я не вижу никакого способа получить объявление анонимного типа для принятия data-myid, так как это не допустимое имя свойства в С#. Один из вариантов заключается в создании новой перегрузки, которая принимает дополнительный параметр 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 } ) ) %>

Ответ 3

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

Ответ 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, вам придется использовать словарь или создать другое расширение, упрощающее построение словарей.