Tuesday, November 2, 2010

CascadingDropDown in Ajax With ASP.net

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

        }
    }

No comments:

Post a Comment