C# 如何将数据属性添加到 ASP.NET MVC 中的 html 元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1306006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-06 14:56:08  来源:igfitidea点击:

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

c#asp.net-mvc

提问by Hemant

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

几分钟前我了解到添加数据属性是一种将自定义信息添加到 html 元素的好方法。所以我试着这样做:

<%= 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?

但这看起来并不......嗯......干净!有没有更好的方法来做到这一点?

采纳答案by Lee Gunn

Use an underscoreinstead of a dash.

使用下划线而不是破折号。

new { data_myid = m.ID }

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.

绝对适用于 MVC3(尚未检查其他版本)。呈现 HTML 时,下划线将转换为破折号。

EDIT

编辑

This works in the latest versions of MVC too.

这也适用于最新版本的 MVC。

回答by redsquare

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.

我认为您必须创建自己的助手来为您执行此操作。我找不到直接在视图中执行此操作的方法。

回答by stevemegson

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 dataAttributesparameter, and prepends data-to the names for you...

我看不到任何方法可以让匿名类型声明接受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);
            }
        }

    }
}

Then you can add a data-myidattribute with

然后你可以添加一个data-myid属性

<%= 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 } ) ) %>