Populate an ASP list box based on selection of a previous list box using AJAX

[axman1000]

I have 3 ASP list boxes. I would like to populate the second list box based on the selection in the first list box and based on the selection in the second list box, populate the third. I would like to do this using AJAX. How can I do it? Can someone please give me the code snippet as I am a complete noob when it comes to AJAX and I kinda am running outta time to finish implementing it. Additionally, should I use ASP boxes or HTML <select> tag? Please help me ASAP!

PS: I have to use only ASP.Net and MS SQL Server.

[Derice]

In your .aspx file make sure you include AutoPostBack="True". This will allow the control to notify server when user selected an item in the list

<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" 
            onselectedindexchanged="ListBox1_SelectedIndexChanged"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server" AutoPostBack="True" 
            onselectedindexchanged="ListBox2_SelectedIndexChanged"></asp:ListBox>
<asp:ListBox ID="ListBox3" runat="server"></asp:ListBox>

In your code behind, you may code how item is being populated into another listbox based on selected item.

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //populate data to ListBox2
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //populate data to ListBox3
    }

Add a script manager and update panel into the .aspx page. Include all ListBoxes into the update panel. Everything in the update panel will be repopulated asynchronously.

[axman1000]

Thank you, Derice, for your reply. Would this work if I had to extract data from a table in a database? Also, should I give value tags to all the items in the drop down and search the table to populate the 2nd dropdown based on the selected value in the first? Please guide me on how I can carry out this procedure. Thanks for your help!

In your .aspx file make sure you include AutoPostBack="True". This will allow the control to notify server when user selected an item in the list

<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" 
            onselectedindexchanged="ListBox1_SelectedIndexChanged"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server" AutoPostBack="True" 
            onselectedindexchanged="ListBox2_SelectedIndexChanged"></asp:ListBox>
<asp:ListBox ID="ListBox3" runat="server"></asp:ListBox>

In your code behind, you may code how item is being populated into another listbox based on selected item.

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //populate data to ListBox2
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //populate data to ListBox3
    }

Add a script manager and update panel into the .aspx page. Include all ListBoxes into the update panel. Everything in the update panel will be repopulated asynchronously.

[Derice]

Would this work if I had to extract data from a table in a database?
answer: Sure, just have all the data extraction and insertion into the Listbox done in SelectedIndexChanged event.

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox2
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox3
    }

should I give value tags to all the items in the drop down and search the table to populate the 2nd dropdown based on the selected value in the first?
answer: It is optional, as long as you can identify which corresponding data to get for the next listbox.

[axman1000]

Derice! Godsend you are! Thanks a lot!! Works like a charm! One last thing. Sorry to bother you, but if I am to run a query based on the value in the last list box, how do I do that? I've databound all my list boxes, and so, how would I be able to run a query based on the last list box's value? Thanks so much for your help! And sorry I'm mooching off your code like this.. :( Just that I have a deadline approaching.. Sorry.. :(

Would this work if I had to extract data from a table in a database?
answer: Sure, just have all the data extraction and insertion into the Listbox done in SelectedIndexChanged event.

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox2
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox3
    }

should I give value tags to all the items in the drop down and search the table to populate the 2nd dropdown based on the selected value in the first?
answer: It is optional, as long as you can identify which corresponding data to get for the next listbox.

[Derice]

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox2
        //you may get your selected value for ListBox1 with ListBox1.SelectedItem.Text / ListBox1.SelectedItem.Value
        //based on the selected value extract the corresponding DataTable
        //databound your next ListBox2 with 
        ListBox2.DataSource = DataTable;
        ListBox2.DataBind();
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox3
    }

[axman1000]

Thanks a lot! :) Thank you! :)

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox2
        //you may get your selected value for ListBox1 with ListBox1.SelectedItem.Text / ListBox1.SelectedItem.Value
        //based on the selected value extract the corresponding DataTable
        //databound your next ListBox2 with 
        ListBox2.DataSource = DataTable;
        ListBox2.DataBind();
    }
protected void ListBox2_SelectedIndexChanged(object sender, EventArgs e)
    {
        //extract from db and insert into listbox3
    }