Hello,

Many times I have come across this question in asp.net forum where people have had trouble in making their radiobuttonlist control work properly if they make one of the radio button as "selected" by default.In order to understand what I am trying to say lets look at the following declaration :-

<asp:RadioButtonList ID="rdbList" AutoPostBack="true" runat="server"
 onselectedindexchanged="rdbList_SelectedIndexChanged">
<asp:ListItem Text="Hockey" Value="Hockey" Selected="True"></asp:ListItem>
 <asp:ListItem Text="Skating" Value="Skating"></asp:ListItem>
 <asp:ListItem Text="Cricket" Value="Cricket"></asp:ListItem>
 <asp:ListItem Text="Rugby" Value="Rugby"></asp:ListItem>
 </asp:RadioButtonList>

Following is the code behind method for “SelectedIndexChanged” event of the RadioButtonList control :-

protected void rdbList_SelectedIndexChanged(object sender, EventArgs e)
 {
 ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "src", "alert('hiii');", true);
 }

In the above declaration the radio button "Hockey" is selected by default.On the selection of radio buttons I am firing the SelectedIndexChanged event and in that I am simply alerting the text "hii".Now when you run your web page , everything works fine except that once you select the radio button "Hockey" after selecting some other radio button , then nothing happens.No postback !!!

Before going down in understanding why things stopped working for the default selected button , lets take a break and understand what does javascript
"__doPostBack()" function means.

WebForms generally relies on two mechanism for page postbacks.First one is the HTML "Submit" button.Once the user clicks the submit button,DOM element raises the "submit" event and eventually invokes the "onsubmit" event handler.But the problem with this approach is that it relies completely on the presence of "Submit" button in our webpage which is not the case most of the times.

The other and most commonly used approach is the javascript "__doPostBack()" function.The code for this function looks something like this :-

function __doPostBack(eventTarget, eventArgument) {
 if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
 theForm.__EVENTTARGET.value = eventTarget;
 theForm.__EVENTARGUMENT.value = eventArgument;
 theForm.submit();
 }
}

In the above code "eventTarget" parameter refers to the control which raised the postback and "eventArgument" is the value associated with that postback.For e.g consider a dropdown control,on its selection if postback takes place then "eventTarget" will hold the UniqueID of the dropdown control and "eventArgument" will hold the selected value.Finally __doPostBack() function invokes the submit method on the DOM element.Most of the Asp.Net server control relies on the “__doPostBack()” mechanism for raising a postback.

So now getting back to the problem , if we run our web page and see the generated source code(View Source) for the RadioButtonList control then it looks something like this:-

<input id="rdbList_0" type="radio" name="rdbList" value="Hockey" checked="checked" /><label for="rdbList_0">Hockey</label>
<input id="rdbList_1" type="radio" name="rdbList" value="Skating" onclick="javascript:setTimeout('__doPostBack(\'rdbList$1\',\'\')', 0)" /><label for="rdbList_1">Skating</label>
<input id="rdbList_2" type="radio" name="rdbList" value="Cricket" onclick="javascript:setTimeout('__doPostBack(\'rdbList$2\',\'\')', 0)" /><label for="rdbList_2">Cricket</label>
<input id="rdbList_3" type="radio" name="rdbList" value="Rugby" onclick="javascript:setTimeout('__doPostBack(\'rdbList$3\',\'\')', 0)" /><label for="rdbList_3">Rugby</label></td>

As we can see apart form all other radio buttons there is no "__doPostBack()" function which is rendered  for the "onclick" event of the radio button "Hockey".Also to keep above markup small I have removed all the <table> ,<tr>and <td> tags.

Solution 1

In the pre-render event of the radio button list control manually assign the __doPostBack() function for the radio button which is selected by default.Here is how it can be done :-

protected void rdbList_PreRender(object sender, EventArgs e) {
     rdbList.Items[0].Attributes.Add("onclick", "javascript:setTimeout('__doPostBack(\\'rdbList$0\\',\\'\\')', 0)");
 }

In the above code we are manually assigning the __doPostBack() function for the "onclick" event of the particular radio button.Note carefully the highlighted values in the above code,the index "0" corresponds to the radio button which is selected by default.In the example which I have taken , the first radio button was selected so its index becomes 0.

Solution 2

The above code is fine but no doubt its more cumbersome and difficult to understand.And above all if the RadioButtonList control is being binded to some datasource , then it would be difficult to decide which of the option will be selected by default.Using client side technologies like jQuery and Asp.net Ajax also we can attach this behavior to our RadioButtonList control.Following is the approach which I have followed in my application.

$(document).ready(function() {
 $('input[type=radio]').each(function() {
 $addHandler($(this), "click", onClick);
 });
 });

 function onClick(evt) {
 __doPostBack('rdbList', '');
 }

In the above code I am using jQuery to iterate over all the input elements of type "radio" and then for each element I am attaching a callback function handler wherein in that function I am calling the javascript __doPostBack() function by passing the id of the RadioButtonList control which eventually calls the server side rdbList_SelectedIndexChanged method.

One nice thing to note here is that how both jQuery and asp.net ajax functionalities are used alongside and how knowledge of these technology can drastically reduce the effort required in client side coding.

Solution 3

Its simple , do not set any option as selected by default.Well its just a solution which I am sure will never be followed in real time scenario.