Handling updatepanels that are "chained" together in asp.net?

Question

Much like when you are looking for support on a website or whatever, you choose Product from the first listbox (say, Hard Disk), which triggers and populates a second listbox with more options (say, "Solid State", "SATA"), and so on...

The problem I am having is that when you select something from the second listbox that should populate the third one, the postback triggers the first listbox too, which then repopulates the 2nd one back to its default value.

Eg.

[Dropdown 1] (contains A B C D E)

[DropDown 2] (A in dropdown 1 has options X Y Z)

[Dropdown 3] ...

If you choose A, then dropdown 2 populates with XYZ. You choose Z, and it should update dropdown3, but the postback also triggers dropdown 1 again, which replaces Dropdown 2's contents and resets the value back to X.

I am looking for an elegent solution. I had one that said only repopulate dropdown 2 if dropdown 1 has changed, but it means keeping track of what dropdown 1 was before the page posted back.

Each dropdown is in an updatepanel and set to autopostback=true, and each updatepanel has the previous listbox in its triggers.

Answer 1

I would simply put all the drop downs in the same update panel. It might not be as efficient, but it will probably bee good enough and certainly require less lines of code.

Answer 2

Why don't you try AjaxControl Toolkit CascadingDropDown. It seems to suit your needs.

Also, this will improve performance, as postback won't be sending all page information (as does with update panel).

Answer 3

I figured it out - I can use ScriptManager1.AsyncPostBackSourceElementID to check what caused the trigger, and make it refresh only for postback and the first dropdown box.

Answer 4

Maybe I'm thinking too simplified, but why wouldn't you just be handling all these events ... as events? Populate DDL1 only on initial Page_Load. Populate DDL2 only on DDL1.SelectedIndexChanged. Populate DDL3 only on DDL2.SelectedIndexChanged...

Answer 5

First Check if the second TextBox isn't a trigger to the first UpdatePanel, if it is then remove it from the first update panel's Triggers Collection.

Here's the Key Concept:

If you have two separate tags you should place a trigger tag in the second update panel and insert a AsyncPostBackTrigger with the controlID of the first dropdownlist, here's a simple example:

<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="TxtBox1" />
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="TxtBox2" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TxtBox1" />
</Triggers>
</asp:UpdatePanel>