65.9K
CodeProject is changing. Read more.
Home

CascadingDropDown in Ajax With ASP.net

starIconstarIconemptyStarIconemptyStarIconemptyStarIcon

2.00/5 (1 vote)

Oct 11, 2013

CPOL

3 min read

viewsIcon

8481

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();


        }

    }