CssClass attribute generates class name on incorrect element - asp.net

Question

I am working on a web forms page which has a GridView which contains two columns of radio buttons generated from an asp:RadioButton control.
I wanted to implement a "select all" checkbox in the respective column headers that would when checked select all of the corresponding radio buttons to checked in that particular column.
I wrote a small bit of jQuery which would do this but it didn't work straight away. In order for jQuery to select each radio button and mark it as checked I set the class name of the asp:RadioButton control using the CssClass attribute:
<asp:RadioButton ID="id" CssClass="myClass" runat="server" ... />
I was expecting this to generate markup something like:
<input type="radio" class="myClass" ... />
Meaning my jQuery selector would be:
jQuery("input.myClass")
Instead it has wrapped the input element in a span element and applied the class attribute I specified to the span element instead of the input element.
Is there a way to prevent ASP.NET generating this wrapping span element around my input element when using the asp:RadioButton control?
Can I get it to apply the class attribute to the actual input element, instead of the wrapping span element if ASP.NET has to generate it?
(Note: I have updated my jQuery to use a selector that works in the meantime:
jQuery("span.myClass input")
)

Answer 1

Web controls in the System.Web.UI.WebControls namespace may render differently in different browsers. You can't count on them rendering the same elements always. They may add anything that they think is needed to make it work in the specific browser, changing with each version of .NET.
If you want to have any control over how the controls are rendered as html, you should use the controls in the System.Web.UI.HtmlControls namespace instead. That is:
<input type="radio" id="RadioButton1" runat="server" class="myClass" />
<input type="radio" id="RadioButton2" runat="server" class="myClass" />
<input type="radio" id="RadioButton3" runat="server" class="myClass" />
They will render just as the corresponding html element, with no extra elements added. This of course means that you will have to take responsibility for the browser compatibility, as the control doesn't. Also, those controls doesn't have all the features of the controls in the WebControls namespace. So it depends on your needs for the specific situation.
You could also find another means of selecting all of the inputs in jquery, like basing it on the id (using a similar name on all of them, and a wildcard to select them all). Attribute Contains Selector

Answer 2

This is one of the complaints of ASP.NET WebForms is you don't get absolute control over the rendered HTML. I have used jQuery selectors exactly as you have implemented and works just fine.

Answer 3

You can't change the way the asp.net render it's control so you can remove the asp.net radio button and user the input tag instead with runat="server".

Answer 4

You can create a new ASP.Net Server Control and change inherit from WebControl to RadioButton
Then modify html after it's renderd to this. It removes the span tag and moves attributes Class And Title back from the span to the rado button input.
public class MYRADIOBUTTON: RadioButton
{
public bool AddSpanTag { get { return ViewState["AddSpanTag"] != null ? (bool)ViewState["AddSpanTag"] : false; } set { ViewState["AddSpanTag"] = value; } }
protected override void Render(HtmlTextWriter writer)
{
if (AddSpanTag)
{
base.Render(writer);
}
else
{
StringWriter w = new StringWriter();
HtmlTextWriter rbw = new HtmlTextWriter(w);
base.Render(rbw);
rbw.Close();
string html = w.GetStringBuilder().ToString();
if (html.Contains("<span"))
{
int start = html.IndexOf("<input");
int end = html.IndexOf("/>", start);
string rbHtml = html.Substring(start, (end - start));
if (CssClass != "")
rbHtml = rbHtml + " class=\"" + CssClass + "\"";
if (ToolTip != "")
rbHtml = rbHtml + " title=\"" + ToolTip + "\"";
html = rbHtml + "/>";
}
writer.Write(html);
}
}
After you build this in your webproject. Open a page in Designview then you should get a new Tab in Toolbox with your custom radiobutton control . Drag it to the page and set the Property AddSpanTag to false.
<cc1:MYRADIOBUTTON ID="btnSel" ToolTip="Select" GroupName="select" AddSpanTag="false" runat="server" />