I have a User Control which has a RadioButtonList on it.

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow"
RepeatDirection="Horizontal"  >
    <asp:ListItem Text="Yes" Value="Y" onClick="getCheckedRadio(true);" />
    <asp:ListItem Text="No" Value="N" onClick="getCheckedRadio(false);" />
</asp:RadioButtonList>

As you can see I initially had an onClick event set to activate a JavaScript function, which this code was on a page it worked fine, but since moving to a user control it has stopped calling it.

The code has the following message: "Validation (ASP.Net): Attribute 'onClick' is not a valid attribute of element 'ListItem'.

Is there anyway that I can have an onClick style event which will call my function? I have seen some examples which constantly iterate through the items and then determine which is selected, but I have lots of these radio buttons so would prefer not to use that if possible.

I have a User Control which has a RadioButtonList on it.

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow"
RepeatDirection="Horizontal"  >
    <asp:ListItem Text="Yes" Value="Y" onClick="getCheckedRadio(true);" />
    <asp:ListItem Text="No" Value="N" onClick="getCheckedRadio(false);" />
</asp:RadioButtonList>

As you can see I initially had an onClick event set to activate a JavaScript function, which this code was on a page it worked fine, but since moving to a user control it has stopped calling it.

The code has the following message: "Validation (ASP.Net): Attribute 'onClick' is not a valid attribute of element 'ListItem'.

Is there anyway that I can have an onClick style event which will call my function? I have seen some examples which constantly iterate through the items and then determine which is selected, but I have lots of these radio buttons so would prefer not to use that if possible.

• javascript
• asp

• Are you using JQuery at all? – xDaevax Commented Jun 9, 2014 at 17:38
• I can do if necessary, in some parts it does use JQuery (for other functions). It is just this method isn't activated. – MattR Commented Jun 9, 2014 at 17:44

2 Answers 2

Consider putting this JQuery or some variation on your main form.

//On document ready
$(function() {
    $("input[type='radio']").on('click', function(e) {
       getCheckedRadio($(this).attr("name"), $(this).val(), this.checked);
    });
});

//External function to handle all radio selections
function getCheckedRadio(group, item, value) {
    $(".group-label").text(group);
    $(".item-label").text(item);
    $(".item-value").text(value);
}

Then in your partial:

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

This should handle all radio buttons (or at least the ones you target with the JQuery if you change it).

I have a working sample (without the .NET code) here that demonstrates the principle.

http://jsfiddle/xDaevax/UwEN5/

Edit: Here is essentially what is happening behind the scenes.

I'm not sure how new you are to this, so I will go into a bit of detail here and I apologize if you already have a handle on some of these things.

When you use .NET controls (asp:DropDownList, asp:RadioButtonList, asp:ListItem) these are all server-side representations of what will be generated when the page is sent to a browser. The code you see in your .aspx page is not necessarily how the markup will be sent to the browser.

For example, the following code:

<asp:Label ID="_CtlMyLabel" runat="server" Text="Label" />

Will be rendered in the browser HTML as:

<span id="_CtlMyLabel">Label</span>

If you were to wrap it in a panel:

<asp:Panel ID="_CtlWrapperPanel" runat="server" ClientIDMode="Inherit">
    <asp:Label ID="_CtlMyLabel" runat="server" Text="Label" ClientIDMode="Inherit" />
</asp:Panel>

You would get:

<div id="_CtlWrapperPanel">
    <span id="_CtlMyLabel">Label</span>
</div>

When it es to a RadioButtonList, the following asp:RadioButtonList:

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

Will generate:

<span id="rblMyOptions">
    <input id="rblMyOptions_0" type="radio" name="rblMyOptions" value="Y" />
    <label for="rblMyOptions_0">Yes</label>
    <input id="rblMyOptions_1" type="radio" name="rblMyOptions" value="N" />
    <label for="rblMyOptions_1">No</label>
</span>

When you say OnClick on the ListItem, .NET thinks you are referring to a Server-Side function you created called rblMyOptions_Click (which will do a post back), but since you want this to happen on the client, the strategy I suggested to solve it is to use JQuery to bind to the click event of each radio button, since the "radio button list" doesn't actually exist in the HTML.

You can see this question / answer for more info: ASP.NET radiobuttonlist onclientclick

By using the JQuery to target any input[type='radio'] we bind javascript to any radio button input (or we can be more restrictive as well).

it seems to be a know bug

refer this document (go to section "why attributes cannot be applied to listitems of a list control")

the core should be in this code to fix the bug

    public void RenderItem(System.Web.UI.WebControls.ListItemType itemType, 
                           int repeatIndex, RepeatInfo repeatInfo, 
                           HtmlTextWriter writer)
    {
        controlToRepeat.ID = repeatIndex.ToString(NumberFormatInfo.InvariantInfo);
        controlToRepeat.Text = this.Items[repeatIndex].Text;
        controlToRepeat.TextAlign = this.TextAlign;
        controlToRepeat.Checked = this.Items[repeatIndex].Selected;
        controlToRepeat.Enabled = this.Enabled; 

        controlToRepeat.Attributes.Clear();
        foreach (string key in Items[repeatIndex].Attributes.Keys)
            controlToRepeat.Attributes.Add(key, Items[repeatIndex].Attributes[key]);

        controlToRepeat.RenderControl(writer);

}