Asp.net复选框和html数据属性

Question

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

考虑这个标记（注意：在所有示例中删除了id，name和for等属性，因为它们生成的id /名称是详细的）：

<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>

如您所见，渲染的范围用于保存属性。如果在后面的代码中添加属性，也会发生这种情况。任何其他HtmlControl，AFAIK都不会发生这种情况。

有谁知道为什么这个范围被渲染来保存属性？

无论如何在输入标签中呈现属性？

Answer 1

我不确定为什么它用span来渲染，但我想你可以在code-behid中将这个属性直接添加到input的CheckBox元素中，如下所示：

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和文本。我想这是一个span（而不是div），因为它是一个内联元素，使得它在不同的场景中使用更方便。

参考链接：

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

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

Answer 3

只是为了添加我在其他所有方法都失败时使用的另一种方法，你总是可以使用文字控件并使其随意渲染。在处理回发时你需要做更多的工作，但有时这是获得你需要的html的唯一方法。

标记：

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

Codebeside：

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

Answer 4

如果您尝试在click事件上访问该属性，则可以通过强制转换控件来实现。例如，我有一个复选框，我像你一样为它分配一个自定义属性

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

}

我希望这有助于某人