Note: In this concept we will
how to populate and cascading country state city with Dropdownlist in Asp.Net
using Jquery Ajax method and Entity Framework.
-- 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</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.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)
{
}
static testEntities tt = new testEntities();
//
code for Country bind on Page Load......
[WebMethod]
public static List<CountryDetail> CountryBind()
{
List<CountryDetail> cd = new List<CountryDetail>();
var country =
tt.CountryDetails.ToList();
foreach (var v in country)
{
CountryDetail cs = new CountryDetail();
cs.CountryId = v.CountryId;
cs.CountryName =
v.CountryName;
cd.Add(cs);
}
return cd;
}
//
code for State bind on Country Selection.....
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<StateDetail> StateBind(string CountryId)
{
int couid=Convert.ToInt32(CountryId);
List<StateDetail> sd = new List<StateDetail>();
var state =
tt.StateDetails.Where(m => m.CountryId == couid).ToList();
foreach (var v in state)
{
StateDetail ss = new StateDetail();
ss.StateId = v.StateId;
ss.StateName=v.StateName;
sd.Add(ss);
}
return sd;
}
//
code for City bind on State Selection.....
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<CityDetail> CityBind(string StateId)
{
int stateid = Convert.ToInt32(StateId);
List<CityDetail> cityd = new List<CityDetail>();
var city =
tt.CityDetails.Where(m => m.StateId == stateid).ToList();
foreach (var v in city)
{
CityDetail cc = new CityDetail();
cc.CityId = v.CityId;
cc.CityName = v.CityName;
cityd.Add(cc);
}
return cityd;
}
}
Result
0 comments:
Post a Comment