Asp.net checkbox and html data attribute - asp.net

Question

In asp.net, if you use a custom attribute, usually it is rendered as-is.
Considering this markup (note: attributes such as id, name and for were removed in all examples as their generated id/names are verbose):
<asp:TextBox runat="server" data-foo="bar" />
Is rendered in asp.net as:
<input type="text" data-foo="bar" />
That is, asp.net keeps data-foo untouched.
Check box are usually rendered like this:
<asp:CheckBox runat="server" Text="Normal" />
Renders as:
<input type="checkbox" />
<label>Normal</label>
But if you add a custom attribute on a checkbox:
<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar" />
It renders as:
<span data-foo="bar">
<input type="checkbox" />
<label>Custom attribute</label>
</span>
As you can see, a span in rendered to hold the attribute. This also happens if you add the attribute in code behind. This does not happen with any other HtmlControl, AFAIK.
Does anyone know why this span is rendered to hold the attribute?
Is there anyway to render the attribute in the input tag?

Answer 1

I'm not sure why it's rendered with a span, but I suppose you can add the attribute directly to the input element of the CheckBox in code-behid like this:
myCheckBox.InputAttributes.Add(...)
Reference links:
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
Update
An additional parent element is used, so that the attributes you apply to a CheckBox can affect both the input and the text. I suppose it's a span (and not a div), because it's an inline element, making it more convenient to use in different scenarios.
Reference links:
http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
http://learnwebdesignonline.com/span-div

Answer 2

This is the way that render engine builds the CheckBox control, there isn't very much to do about it.
Something you could do is creating a runat="server" input.
<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>
Another option is adding the data-foo attribute using jquery on document load
$(function(){
$('span[data-foo]').each(function(){
var $span = $(this);
var value = $span.data('foo');
$span.find('input').data('foo',value);
});
})

Answer 3

Just to add another method that I use when all else fails, you can always use a literal control and make it render whatever you want. You need to do a bit more work when handling the postback, but sometimes this is the only way to get the html you need.
Markup:
<asp:Literal ID="myLiteral" runat="server"/>
Codebeside:
myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)

Answer 4

If you are trying to access that attribute on click event you can do that by casting the control. For example I have a check box and I assign it a custom attribute like you did
<asp:CheckBox runat="server" data-foo="bar" />
Now on OnCheckedChanged I need to get that value and in my method I got a sender object.
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
CheckBox myControl = (CheckBox)sender;
string value = myControl.Attributes["data-foo"].ToString();
}
I hope this help someone