In this article I will explain how to populate
one Ajax Cascading dropdown based on selection in another Ajax Cascading
dropdown in ASP.NET
Or
How to implement Ajax cascading dropdown list in asp.net
How to populate dropdown based on another dropdown
but now why I am explaining about this Ajax cascading dropdown list because if
we use this Ajax cascading dropdown list we can get the dropdown data without
any postback operation and we don’t need to write extra code to disable
dropdowns based on other dropdown selection all the futures available with this
Ajax cascading dropdown directly but here we need to write webservices to
populate the dropdowns with data.
I have Two dropdowns Country dropdown lists, State dropdown I need to
populate States dropdown based on Country dropdown.
I have two tables
in DataBase.
1.
Country
Table (tblCountry)
2.
State
Table (tblState)
First we need to establish a connection in
Web.config file.
<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>
</connectionStrings>
Below is the page
design.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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 runat="server">
<title>Dropdown List Cascading </title>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<table align="center">
<tr>
<td colspan="2" style="color: maroon;">
<b><u>Ajax Cascading Dropdown List Sample</u></b>
</td>
</tr>
<tr>
<td colspan="2" height="20px"></td>
</tr>
<tr>
<td>Select Country :
</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" Width="150px"></asp:DropDownList>
<ajax:CascadingDropDown ID="CountryCascading" runat="server" Category="Country" TargetControlID="ddlCountry"
LoadingText="Loading Countries..." PromptText="Select Country" ServiceMethod="CountrydropdownCascading"
ServicePath="CascadingDropdownWebService.asmx">
</ajax:CascadingDropDown>
</td>
</tr>
<tr>
<td>Select State :
</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" Width="150px"></asp:DropDownList>
<ajax:CascadingDropDown ID="StateCascading" runat="server" Category="State" TargetControlID="ddlState"
ParentControlID="ddlCountry" LoadingText="Loading States..." PromptText="Select State"
ServiceMethod="StatedropdownCascading" ServicePath="CascadingDropdownWebService.asmx">
</ajax:CascadingDropDown>
</td>
</tr>
</table>
</form>
</body>
</html>
Below is the total code for Ajax
cascading Dropdowns lists code. We wrote this code in WebService page.
using
System;
using
System.Web.Services;
using
System.Data.SqlClient;
using
System.Collections.Generic;
using
System.Collections.Specialized;
using
AjaxControlToolkit;
using
System.Configuration;
using
System.Data;
/// <summary>
/// Summary description for
DropdownWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class CascadingDropdownWebService : System.Web.Services.WebService
{
SqlConnection conCascading = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);
[WebMethod]
public CascadingDropDownNameValue[] CountrydropdownCascading(string knownCategoryValues, string category)
{
conCascading.Open();
SqlCommand
cmdcountry = new SqlCommand("select * from tblCountry", conCascading);
SqlDataAdapter dacountry = new SqlDataAdapter(cmdcountry);
cmdcountry.ExecuteNonQuery();
DataSet
dscountry = new DataSet();
dacountry.Fill(dscountry);
conCascading.Close();
List<CascadingDropDownNameValue> countrydetails = new List<CascadingDropDownNameValue>();
foreach(DataRow dtrow in dscountry.Tables[0].Rows)
{
string
CountryID = dtrow["CountryID"].ToString();
string
CountryName = dtrow["CountryName"].ToString();
countrydetails.Add(new CascadingDropDownNameValue(CountryName,CountryID));
}
return
countrydetails.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] StatedropdownCascading(string knownCategoryValues, string category)
{
int CountryID;
StringDictionary countrydetails = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
CountryID = Convert.ToInt32(countrydetails["Country"]);
conCascading.Open();
SqlCommand
cmdstate = new SqlCommand("select * from tblState where
CountryID=@CountryID",
conCascading);
cmdstate.Parameters.AddWithValue("@CountryID", CountryID);
cmdstate.ExecuteNonQuery();
SqlDataAdapter dastate = new SqlDataAdapter(cmdstate);
DataSet
dsstate = new DataSet();
dastate.Fill(dsstate);
conCascading.Close();
List<CascadingDropDownNameValue> statedetails = new List<CascadingDropDownNameValue>();
foreach (DataRow dtstaterow in dsstate.Tables[0].Rows)
{
string
stateID = dtstaterow["StateID"].ToString();
string
statename = dtstaterow["StateName"].ToString();
statedetails.Add(new CascadingDropDownNameValue(statename, stateID));
}
return
statedetails.ToArray();
}
}
Output:
No comments:
Post a Comment