How to add data attributes to html element in ASP.NET MVC?

Question

I learned few minutes ago that adding data attributes is a nice way to add custom information to html elements. So I tried to do like this:

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

But it ends up as a syntax error. How can I define custom data attributes?

EDIT:

I see that I can achieve this effect using:

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

But that doesn't look...umm...clean! Is there any better way to do this?

See this question 'Hyphenated html attributes with asp.net mvc' http://stackoverflow.com/questions/2897733/hyphenated-html-attributes-with-asp-net-mvc/12091886#12091886 — ED-209, Feb 14 '13 at 22:55
note: the newer correct answer is http://stackoverflow.com/a/5872576/1037948, farther down this page if you don't like scrolling ;) — drzaus, Feb 06 '14 at 19:38

Lee Gunn · Accepted Answer · 2018-04-13T18:14:59.383

109

Use an underscore instead of a dash.

new { data_myid = m.ID }

This definitely works in MVC3 (haven't checked other versions). The underscore will be converted to a dash when the HTML is rendered.

EDIT

This works in the latest versions of MVC too.

edited Apr 13 '18 at 18:14

answered May 03 '11 at 16:23

Lee Gunn

8,417
4
38
33

I marked this as an answer because it is cleaner and simpler. – Hemant Feb 10 '14 at 06:12

score 5 · Answer 2 · answered Aug 23 '09 at 15:20

I can't see any way to get an anonymous type declaration to accept data-myid, since that's not a valid property name in C#. One option would be to create a new overload that takes an extra dataAttributes parameter, and prepends data- to the names for you...

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

    }
}

Then you can add a data-myid attribute with

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

However, that leaves you to create that overload on any other methods that you want to accept data attributes, which is a pain. You could get around that by moving the logic to a

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

and call it as

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

score -1 · Answer 3 · answered Aug 20 '09 at 13:12

-1

I think you will have to create your own helper to do this for you. I cannot find a way to do this directly in the view.

answered Aug 20 '09 at 13:12

redsquare

78,161
20
151
159

How to add data attributes to html element in ASP.NET MVC?

3 Answers3

Linked