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; } } } }