In this article I will
explain how to bind Ajax Cascading DropDown
list in ASP.NET using WebService.
I have one table in
DataBase.
1.
City
Table (tblCity)
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" %>
<!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>Ajax Dropdown List </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 Dropdown List Sample</u></b>
</td>
</tr>
<tr>
<td colspan="2" height="20px"></td>
</tr>
<tr>
<td>Select City:
</td>
<td>
<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
<ajax:CascadingDropDown ID="ccdCity" runat="server" Category="City"
TargetControlID="ddlCity" PromptText="Select City" LoadingText="Loading City.."
ServiceMethod="BindCityDetails" ServicePath="AjaxDropdown.asmx">
</ajax:CascadingDropDown>
</td>
</tr>
</table>
</form>
</body>
</html>
Below is the total code for Ajax Dropdowns
list cascading code. We need to write this code in WebService page. I have
added webservice with the name as AjaxDropdown.asmx.
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
AjaxDropdown
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script,
using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
[System.Web.Script.Services.ScriptService()]
public class AjaxDropdown : System.Web.Services.WebService {
SqlConnection conCascading = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ConnectionString);
[WebMethod]
public CascadingDropDownNameValue[] BindCityDetails(string knownCategoryValues, string category)
{
conCascading.Open();
SqlCommand
cmdcountry = new SqlCommand("select * from tblCity", 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
CityID = dtrow["CityID"].ToString();
string
CityName = dtrow["CityName"].ToString();
countrydetails.Add(new CascadingDropDownNameValue(CityName, CityID));
}
return
countrydetails.ToArray();
}
}
Output:
No comments:
Post a Comment