Thursday 5 February 2015

Cascading Dropdownlist Country State City in Asp.Net using Jquery Ajax method and C# Ado.Net

05:38    2 comments

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



2 comments:

Subscribe to: Post Comments (Atom)