ASP.NET复选框和HTML数据属性

Question

在ASP.NET中，如果使用自定义属性，通常会按原样呈现。

考虑以下标记（注意：在所有示例中，例如id、name和for等属性已被删除，因为它们生成的id/names过于冗长）：

<asp:TextBox runat="server" data-foo="bar" />

在ASP.NET中呈现的方式是：

<input type="text" data-foo="bar" />

也就是说，asp.net会保持data-foo不受影响。

复选框通常呈现为这样：

<asp:CheckBox runat="server" Text="Normal" />

渲染结果为：

<input type="checkbox" />
<label>Normal</label>

但是，如果您在复选框上添加了自定义属性：

<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar"  />

它的渲染结果为:

<span data-foo="bar">
    <input type="checkbox" />
    <label>Custom attribute</label>
</span>

可以看到，生成的代码中会包含一个span元素来存放属性。即使是在后端代码中添加该属性，这种情况仍然存在。据我所知，其他HtmlControl并没有这种情况。

有人知道为什么要使用span元素来存放属性吗？

有没有办法将属性直接渲染在input标签中？

- Ortiga

---

有趣..只是好奇，你用额外的属性做什么？ - Nick Rolando

Answer 1

我不确定为什么它被渲染为一个元素，但我想你可以直接在CheckBox的input元素上添加属性，就像这样在代码后台中:

我不知道为什么它会渲染成一个标签，但是我认为你可以像这样在代码后端直接向CheckBox的input元素添加属性：

myCheckBox.InputAttributes.Add(...)

参考链接：

• http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
• http://forums.asp.net/p/541142/541562.aspx
• http://msdn.microsoft.com/en-us/library/system.web.ui.attributecollection.add.aspx

更新

添加了一个附加的父元素，这样应用于CheckBox上的属性可以同时影响到input和文本。我想它是一个（而不是

），因为它是一个内联元素，在不同情况下使用更加方便。

参考链接：

• http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
• http://learnwebdesignonline.com/span-div

- Lukasz M

---

不错，我以前从没注意过这个InputAttributes。我试过Attributes.Add，但没有起作用。 - Ortiga

Answer 2

这是渲染引擎构建CheckBox控件的方式，对此没有太多要做的。

你可以创建一个具有runat="server"属性的输入。

<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>

另一种选择是在文档加载时使用jquery添加data-foo属性。

$(function(){
    $('span[data-foo]').each(function(){
        var $span = $(this);
        var value = $span.data('foo');
        $span.find('input').data('foo',value);        
    });
})

- Claudio Redi

Answer 3

当其他方法都无法实现时，我使用的另一种方法是，始终可以使用文字控件并使其呈现任何您想要的内容。在处理回发时需要做更多的工作，但有时这是获取所需HTML的唯一方法。

标记：

<asp:Literal ID="myLiteral" runat="server"/>

代码旁边：

myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)

- Joe Capka

Answer 4

如果您正在尝试在单击事件中访问该属性，可以通过将控件转换来实现。例如，我有一个复选框，并为其分配了一个自定义属性，就像您所做的那样。

<asp:CheckBox runat="server" data-foo="bar" />

现在在OnCheckedChanged事件中，我需要获取它的值，在我的方法中有一个sender对象。

protected void chk1_CheckedChanged(object sender, EventArgs e)
{
    CheckBox myControl = (CheckBox)sender;
    string value = myControl.Attributes["data-foo"].ToString();

}

我希望这能帮助到某个人

- jazz b