Cascading
Dropdownlist Country State City in Asp.Net using Jquery Ajax method and C# Ado.Net.............
Note: In this concept we will
how to populate and cascading country state city with Dropdownlist in Asp.Net
using Jquery Ajax method and C# Ado.Net
-- query for
Sql Server………..
create database test
use test
--create table county,state,city in
database...................
create table CountryDetails(CountryId int primary key,CountryName varchar(50)
unique)
create table StateDetails(StateId int
primary key,StateName
varchar(50)unique,CountryId
int foreign key references
CountryDetails(CountryId) on delete cascade)
create table CityDetails(CityId int
primary key,CityName
varchar(50)unique,StateId
int foreign key references
StateDetails(StateId) on delete cascade)
--insert into tables........................
insert into CountryDetails values(1,'India')
insert into CountryDetails values(2,'England')
insert into StateDetails values(1,'Uttar Pradesh',1)
insert into StateDetails values(2,'Madhya Pradesh',1)
insert into CityDetails values(1,'Varanasi',1)
insert into CityDetails values(2,'Ghaziabad',1)
insert into CityDetails values(3,'Lucknow',1)
insert into CityDetails values(4,'Bhopal',2)
insert into CityDetails values(5,'Reewa',2)
Note:
all the needed jquery files are shown in below
image.........
Code for Default.aspx page………….
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-1.7.1.intellisense.js"></script>
<script type="text/javascript">
//*******
code for Country bind on Page Load…………..
function BindCountry()
{
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "Default.aspx/CountryBind",
dataType: "json",
success: function (data)
{
var v = '';
$.each(data.d, function (i, v1)
{
v += "<option
value='"
+ v1.CountryId + "'>"
+ v1.CountryName + "</option>";
});
$("#ddlcountry").append(v);
},
error: function (result)
{
alert("Error");
}
});
}
$(document).ready(function ()
{
BindCountry();
var v1 = "<option>Select</option>";
$("#ddlcountry").html(v1);
$("#ddlstate").html(v1);
$("#ddlcity").html(v1);
//*******
code for state bind with countryid…………..
$("#ddlcountry").change(function ()
{
var v1 = "<option>Select</option>";
$("#ddlstate").html(v1);
$("#ddlcity").html(v1);
var countryid = $(this).val();
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "Default.aspx/StateBind",
data: "{'CountryId':'" + countryid + "'}",
dataType: "json",
success: function (data)
{
var v = '';
$.each(data.d, function (i, v1)
{
v += "<option
value='"
+ v1.StateId + "'>"
+ v1.StateName + "</option>";
});
$("#ddlstate").append(v);
},
error: function (result)
{
alert("Error");
}
});
});
//*******
code for city bind with stated……………………
$("#ddlstate").change(function ()
{
var v1 = "<option>Select</option>";
$("#ddlcity").html(v1);
var stateid = $(this).val();
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "Default.aspx/CityBind",
data: "{'StateId':'" + stateid + "'}",
dataType: "json",
success: function (data)
{
var v = '';
for (var i = 0; i <
data.d.length; i++)
{
v += "<option
value='"
+ data.d[i].CityId + "'>"
+ data.d[i].CityName + "</option>";
}
//$.each(data.d, function (i,
v1)
//{
// v += "<option value='" +
v1.CityId + "'>" + v1.CityName + "</option>";
//});
$("#ddlcity").append(v);
},
error: function (result)
{
alert("Error");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%" >
<tr><td colspan="2"><span style="color:red;font-family:Verdana">How to populate
Country State City Dropdownlist in Asp.Net using Jquery Ajax method and Ado.net </span></td></tr>
<tr><td>RollNo</td><td><asp:TextBox ID="txtRollNo" runat="server"></asp:TextBox></td></tr>
<tr><td>Name</td><td><asp:TextBox ID="txtname" runat="server"></asp:TextBox></td></tr>
<tr><td>Country</td><td><asp:DropDownList ID="ddlcountry" runat="server"></asp:DropDownList></td></tr>
<tr><td>State</td><td><asp:DropDownList ID="ddlstate" runat="server"></asp:DropDownList></td></tr>
<tr><td>City</td><td ><asp:DropDownList ID="ddlcity" runat="server"></asp:DropDownList></td></tr>
<tr><td></td><td><asp:Button ID="Button1" runat="server" Text="Button" /> </td></tr>
</table>
</div>
</form>
</body>
</html>
Code for Default.aspx.cs page………….
using System;
using
System.Collections.Generic;
using System.Data;
using
System.Data.SqlClient;
using System.Linq;
using System.Web;
using
System.Web.Script.Services;
using
System.Web.Services;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
//
create class Country State City…………….
public class CountryDetails
{
public string CountryId { get; set; }
public string CountryName { get; set; }
}
public class StateDetails
{
public string CountryId { get; set; }
public string StateId { get; set; }
public string StateName { get; set; }
}
public class CityDetails
{
public string StateId { get; set; }
public string CityId { get; set; }
public string CityName { get; set; }
}
//*************************************************//
//
create static instance of SqlConnection.........
static SqlConnection con = new SqlConnection(@"Data
Source=DOMAINADMINS8\INDIA;Initial Catalog=test;Integrated Security=True");
//
code for Country bind on Page Load......
[WebMethod]
public static List<CountryDetails> CountryBind()
{
List<CountryDetails> cd = new List<CountryDetails>();
using (SqlCommand cmd = new SqlCommand("select *
from CountryDetails",
con))
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
CountryDetails cs = new CountryDetails();
cs.CountryId = dr["CountryId"].ToString();
cs.CountryName = dr["CountryName"].ToString();
cd.Add(cs);
}
}
return cd;
}
//
code for State bind on Country Selection.....
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<StateDetails> StateBind(string CountryId)
{
int couid = Convert.ToInt32(CountryId);
List<StateDetails> sd = new List<StateDetails>();
using (SqlCommand cmd = new SqlCommand("select *
from StateDetails where CountryId="+couid+"", con))
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
StateDetails ss = new StateDetails();
ss.StateId = dr["StateId"].ToString();
ss.StateName = dr["StateName"].ToString();
sd.Add(ss);
}
}
return sd;
}
//
code for City bind on State Selection.....
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<CityDetails> CityBind(string StateId)
{
int stateid = Convert.ToInt32(StateId);
List<CityDetails> cityd = new List<CityDetails>();
using (SqlCommand cmd = new SqlCommand("select *
from CityDetails where StateId=" +stateid+ "", con))
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
CityDetails cc = new CityDetails();
cc.CityId = dr["CityId"].ToString();
cc.CityName = dr["CityName"].ToString();
cityd.Add(cc);
}
}
return cityd;
}
}
Result