Hi
While working on web based project, we will get scenario to create cascading drop-down. But if there are more data and you are binding the drop-down using direct approach then performance will be very slow.
In Ajax toolkit there are Cascading drop-down control, using this control we can create very responsive and interactive cascading drop-down. It will give good performance.
Note: I suppose that you are knowing how to use ajax enable WCF in asp.net.
Here is very simple steps to do this task
Steps 1: Drag the Cascading Ajax Control from ajax toolkit and drop in your designer and configure the control like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<fieldset>
<legend><b>Ajax Cascading Dropdown Demo</b></legend>
<br />
<table>
<tr>
<td style="width: 80px">
Country:
</td>
<td>
<asp:DropDownList ID="ddlCountries" runat="server" Width="150">
</asp:DropDownList>
<asp:CascadingDropDown ID="cdlCountries" TargetControlID="ddlCountries" PromptText="Select Country"
PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCountries" runat="server"
Category="CountryId" LoadingText="Loading..." />
</td>
</tr>
<tr>
<td>
State:
</td>
<td>
<asp:DropDownList ID="ddlStates" runat="server" Width="150">
</asp:DropDownList>
<asp:CascadingDropDown ID="cdlStates" TargetControlID="ddlStates" PromptText="Select State"
PromptValue="" ServicePath="Service.svc" ServiceMethod="GetStates" runat="server"
Category="StateId" ParentControlID="ddlCountries" LoadingText="Loading..." />
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<asp:DropDownList ID="ddlCities" runat="server" Width="150">
</asp:DropDownList>
<asp:CascadingDropDown ID="cdlCities" TargetControlID="ddlCities" PromptText="Select City"
PromptValue="" ServicePath="Service.svc" ServiceMethod="GetCities" runat="server"
Category="CityId" ParentControlID="ddlStates" LoadingText="Loading..." />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Step2 : Write the Ajax Enabled WCF code to fetch data from database on basis of categoryId
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using AjaxControlToolkit;
using System.Configuration;
using System.Data.SqlClient;
[ServiceContract(Namespace = "MyTestService")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
// To use HTTP GET, add [WebGet] attribute. (Default ResponseFormat is WebMessageFormat.Json)
// To create an operation that returns XML,
// add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
// and include the following line in the operation body:
// WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
[OperationContract]
public List<CascadingDropDownNameValue> GetCountries(string knownCategoryValues)
{
string query = "SELECT CountryName, CountryId FROM Countries";
List<CascadingDropDownNameValue> countries = GetData(query);
return countries;
}
[OperationContract]
public List<CascadingDropDownNameValue> GetStates(string knownCategoryValues)
{
// this will find the countryId
string country = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["CountryId"];
string query = string.Format("SELECT StateName, StateId FROM States WHERE CountryId = {0}", country);
List<CascadingDropDownNameValue> states = GetData(query);
return states;
}
[OperationContract]
public List<CascadingDropDownNameValue> GetCities(string knownCategoryValues)
{
// this will find the StateId
string state = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)["StateId"];
string query = string.Format("SELECT CityName, CityId FROM Cities WHERE StateId = {0}", state);
List<CascadingDropDownNameValue> cities = GetData(query);
return cities;
}
private List<CascadingDropDownNameValue> GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
using (SqlConnection con = new SqlConnection(conString))
{
con.Open();
cmd.Connection = con;
using (SqlDataReader reader = cmd.ExecuteReader())
{
while (reader.Read())
{
values.Add(new CascadingDropDownNameValue
{
name = reader[0].ToString(),
value = reader[1].ToString()
});
}
reader.Close();
con.Close();
return values;
}
}
}
}
Chandradev's Blog 