CascadingDropDown in Ajax With ASP.net
2.00/5 (1 vote)
Step1: Create a table in database:- create table test( state1 varchar(50),city varchar(50) ) Step2:- In the .aspx Page:- <select id="statelist"
Step1: Create a table in database:-
create table test
(
state1 varchar(50),
city varchar(50)
)
Step2:- In the .aspx Page:-
<select id="statelist" runat="server" onchange="showCity()" style="width: 160px">
<option></option>
</select>
<asp:DropDownList ID="citylist" runat="server" Width="184px">
</asp:DropDownList>
Take statelist for State and citylist for City
When you select any item from statelist the citylist will automatically fill because of ajax
Step3:- Write this in the <head> Part:-
<script language="JavaScript" type="text/javascript" >
var xmlHttp
var arr;
function showCity()
{
xmlHttp=GetXmlHttpObject()
var url="Default.aspx"
url=url+"?name="+document.getElementById('statelist').value
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
return false;
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var str;
str = xmlHttp.responseText;
arr=str.split(",");
var i;
for(i=0;i<arr.length;i++)
{
dd2= document.getElementById("citylist")
var theOption = new Option;
theOption.text = arr[i];
theOption.value = arr[i];
dd2.options[i] = theOption;
}
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
</script>
Step 4:- in the .cs page:-
SqlConnection con = new SqlConnection("data source = MY\\SQLEXPRESS; initial catalog = try; integrated security=true");
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from test", con);
SqlDataReader dr;
dr = cmd.ExecuteReader();
statelist.DataSource = dr;
statelist.DataTextField = "state";
statelist.DataBind();
dr.Close();
con.Close();
}
if (Request.QueryString["name"] != null)
{
string name = Request.QueryString["name"];
Response.Clear();
con.Open();
SqlCommand cmd = new SqlCommand("select * from test where state=@state", con);
cmd.Parameters.AddWithValue("@state", name);
SqlDataReader dr;
dr = cmd.ExecuteReader();
string str = "";
int a = 0;
while (dr.Read())
{
if (a == 0)
str += dr["city"].ToString();
else
str += "," + dr["city"].ToString();
a++;
}
Response.Write(str);
Response.End();
con.Close();
}
}