Getting Started

Re: load datas from database with the help of javascript when an event occur

Vince Xu - MSFT — Mon, 31 Dec 2007 05:20:50 GMT

Hi,

I suggest you use AJAX to achieve it as Mike suggested. If you insist using JavaScript to achieve it without AJAX, you can try the sample as below.

In this approach, you have to load all of the datas into HTML in the first time. You can use DropDownList Control, and you can also use HTML control Select insteads of DropDownList. They are the same things.

    <form id="form1" runat="server">
<select id="s1" name="s1" onchange="s1_change(this.value)"></select><select id="s2" name="s2"></select>
     </form>

You can add the datas from database by RegisterStartupScript.

        protected void Page_Load(object sender, EventArgs e)
        {

                StringBuilder str = new StringBuilder();
                str.Append("var array=new Array();");
                str.Append("array[0]=new Array(\"State1\",\"root\",\"State1\");");
                str.Append("array[1]=new Array(\"State2\",\"root\",\"State2\");");
                str.Append("array[2]=new Array(\"District1 of State1\",\"State1\",\"District1 of State1\");");
                str.Append("array[3]=new Array(\"District2 of State1\",\"State1\",\"District2 of State1\");");
                str.Append("array[4]=new Array(\"District3 of State1\",\"State1\",\"District3 of State1\");");
                str.Append("array[5]=new Array(\"District1 of State2\",\"State2\",\"District1 of State2\");");
                str.Append("array[6]=new Array(\"District2 of State2\",\"State2\",\"District2 of State2\");");
                str.Append("array[7]=new Array(\"District3 of State2\",\"State2\",\"District3 of State2\");");
                //You can add datas from database here by loop. Something like:
                //for (int i = 0; i < dt.Rows.Count; i++)
                //{
                //    str.Append("array[i]=new Array(\"" + dt.Rows[0].ToString() + "\",\"" + dt.Rows[1].ToString() + "\",\"" + dt.Rows[0].ToString() + "\");");
                //}
                str.Append("var select = document.getElementById(\"s1\");");
                str.Append("for(i=0;i<array.length;i++){ ");
                str.Append("if(array[i][1]==\"root\")");
                str.Append("{");
                str.Append("var item = new Option(array[i][0],array[i][2]); ");
                str.Append("select.add(item);");
                str.Append("}");
                str.Append("}");
                str.Append("function s1_change(command)");
                str.Append("{");
                str.Append("var select1 = document.getElementById(\"s1\");");
                str.Append("var select = document.getElementById(\"s2\"); ");
                str.Append("while(select.options.length>0){ ");
                str.Append("select.options.remove(0); ");
                str.Append("} ");
                str.Append("for(i=0;i<array.length;i++){ ");
                str.Append("if(select1.value==array[i][1])");
                str.Append("{");
                str.Append("var item = new Option(array[i][0],array[i][2]); ");
                str.Append("select.add(item); ");
                str.Append("}");
                str.Append("}");
                str.Append("}");

                ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "redirectMe", str.ToString(), true);

        }

After that, you can retrieve the value selected by Request["ControlName"].

Hope this can help.

Re: load datas from database with the help of javascript when an event occur

Mikesdotnetting — Sat, 29 Dec 2007 08:35:01 GMT

If you want to use javascript to load the from the database, you need to use the xmlhttprequest object. That's the core of Ajax. You can either use the ASP.NET Ajax library or you can write your own javascript to call xmlhttprequest which makes the server-side request to the database. Either way, it's Ajax.

Alternatively, you ignore any javascript events, and load the second dropdownloist when the page posts back.

These are the only options you have.

Re: load datas from database with the help of javascript when an event occur

lintolawrance — Sat, 29 Dec 2007 04:28:37 GMT

hai friends,

can we possible this task witout using ajax ?

Re: load datas from database with the help of javascript when an event occur

Mikesdotnetting — Fri, 28 Dec 2007 09:29:53 GMT

Look at the CascadingDropDown in the Ajax Control Toolkit: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

load datas from database with the help of javascript when an event occur

lintolawrance — Fri, 28 Dec 2007 04:36:27 GMT

hai friends,

i have two dropdownlist . one for state and other for district. i am trying to load the districts based on the state (selectindexchanged) with the help of javascript from database.please give the solutions for achieving the task...........

thanks in advance to all......................