|
In my previous article, we have
populated the child DropDownList [City] based on the selection in the parent
DropDownList [State] using jQuery and AJAX. Moving forward, we will implement
the same example by populating a RadioButtonList instead of a child DropDownList
control.
Refer the below figure,
Before moving into the article, it will
be good if we understand how the ASP.Net RadioButtonList control will render to
the client.
ASP.Net RadioButtonList
control
If we have a RadioButtonList control on
the ASPX page, it will be rendered as a HTML table with INPUT tags for radio
buttons.
Something like,
<table id="RadioButtonList1"
border="0">
<tr>
<td><input
id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="Bangalore"
/><label
for="RadioButtonList1_0">Bangalore</label></td>
</tr><tr>
<td><input
id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="Mysore"
/><label
for="RadioButtonList1_1">Mysore</label></td>
</tr>
</table>
One thing to notice is, if the
RadioButtonList control does not have any ListItem item loaded then ASP.Net will
not render any HTML for the control. Hence, a RadioButtonList control with no ListItem will render no HTML
which makes it impossible to access or populate it from client side. But if we look into our requirement, we need to populate
the RadioButtonList only if we select a value in parent DropDownList(This means, we will have no HTML output for RadioButtonList initially).
Thus, it is not be possible to achive our requirement using ASP.Net RadioButtonList control from client side scripts.
In the coming sections, we will see how this difficulty can be addressed with a possible work
around.
How to overcome this
drawback?
To overcome this drawback, we will
construct HTML radio button control for each city and will group all the radio
button with same name to behave as RadioButtonList control using jQuery.
Something like,
<INPUT id=RadioButton0
onclick=RecordCheck(this) type=radio value=1 name=City><LABEL
for=RadioButton0>Chennai</LABEL>
<INPUT id=RadioButton1
onclick=RecordCheck(this) type=radio value=2 name=City><LABEL
for=RadioButton1>Coimbatore</LABEL>
When the user clicks any option, we
will record the value in an ASP.Net HiddenField control which then can be
fetched in the server side. Thus, we can see onclick event configured for the
radio buttons in the above code.
With this information, we will redo the
sample application we did on the previous article with radio button
control.
Steps
1. Open Visual Studio 2008, Click File >Website and choose ASP.Net
Website.
2. Drag DropDownList control from the toolbox and rename its ID to
ddlStates.
3. For easy understanding and simplicity, I will hardcode the
ListItems. You can bind it from database in your case. This DropDownList will
be the parent.
4. Declare a DIV tag to populate the radio buttons from
jQuery.
<DIV id="rdbList">
</DIV>
5. Drag an ASP.Net HiddenField control to record the city selection in
the client side.
<asp:HiddenField ID="hfCity"
runat="server"></asp:HiddenField>
We will include the same HttpHandler
implementation we used in my previous article to return cities in JSON format.
To include new HttpHandler, Right click
the project in solution and click “Add New Item”. Select “Generic Hanlder”. I
have named it as LoadCities.ashx. The HttpHanlder should get the StateID as a
query string parameter to fetch the cities from database. Again, I have
hard-coded the cities based on the state id for simplicity purpose. You can
fetch it from database. Now, the cities should be returned back in JSON format
from the HttpHandler.
<%@ WebHandler Language="C#"
Class="LoadCities" %>
using System;
using System.Web;
using System.Text;
public class LoadCities : IHttpHandler
{
public void ProcessRequest
(HttpContext context) {
string StateID =
context.Request.QueryString["StateID"];
//Contact Database to get th elist
of cities based on StateID
StringBuilder strCities = new
StringBuilder();
if (StateID == "1")
{
strCities.Append("[");
strCities.Append("{");
strCities.Append("\"City\":\"Chennai\",");
strCities.Append("\"ID\":\"1\"");
strCities.Append("},");
strCities.Append("{");
strCities.Append("\"City\":\"Coimbatore\",");
strCities.Append("\"ID\":\"2\"");
strCities.Append("}");
strCities.Append("]");
}
else if (StateID ==
"2")
{
strCities.Append("[");
strCities.Append("{");
strCities.Append("\"City\":\"Bangalore\",");
strCities.Append("\"ID\":\"1\"");
strCities.Append("},");
strCities.Append("{");
strCities.Append("\"City\":\"Belgaum\",");
strCities.Append("\"ID\":\"2\"");
strCities.Append("}");
strCities.Append("]");
}
context.Response.ContentType =
"application/json";
context.Response.ContentEncoding =
Encoding.UTF8;
context.Response.Write(strCities.ToString());
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
|