UpdatePanel with multiple DropDownList

Question

EDIT: It was DropDownList.Items.Clear(); in a method where I listed some stuff from db, that caused the problem. however, I do not understand why this would cause the problem. I would really appreciate if I could give an explanation, since I really need to use Items.Clear(); somehow

I got 3 DropDownList, where I update a specific label depending on which value I select within one of these 3 DropDownList. Every DropDownList works fine, until I pick the next one, and the others before it will not trigger via UpdatePanel.

E.g. First one works, but stops working(the label wont update) once I use the second one. The second works but once third DropDownList is used, the second wont work either, and only the third DropDownList is working fine.

Same goes if I, immediately use the third, the first and second DropDownList wont work via UpdatePanel.

In other word, once the latest DropDownList is being used, every DropDownList before it wont trigger via UpdatePanel.

aspx:

<asp:DropDownList ID="dpl1" runat="server" OnSelectedIndexChanged="dpl1_OnSelectedIndexChanged" AutoPostBack="True" />
<asp:DropDownList ID="dpl2" runat="server" OnSelectedIndexChanged="dpl2_OnSelectedIndexChanged" AutoPostBack="True" />
<asp:DropDownList ID="dpl3" runat="server" OnSelectedIndexChanged="dpl3_OnSelectedIndexChanged" AutoPostBack="True" />

<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional" >
  <ContentTemplate>
     <asp:Label ID="lblDPB" runat="server"/>
  </ContentTemplate>

  <Triggers>
       <asp:AsyncPostBackTrigger ControlID="dpl1" EventName="SelectedIndexChanged" />
       <asp:AsyncPostBackTrigger ControlID="dpl2" EventName="SelectedIndexChanged" />
       <asp:AsyncPostBackTrigger ControlID="dpl3" EventName="SelectedIndexChanged" />
  </Triggers>
</asp:UpdatePanel>

Code behind:

 protected void dpl1_OnSelectedIndexChanged(object sender, EventArgs e) {

        lblDPB.Text = "#1: ";
    }

    protected void dpl2_OnSelectedIndexChanged(object sender, EventArgs e) {
        lblDPB.Text = "#2: ";
    }

    protected void dpl3_OnSelectedIndexChanged(object sender, EventArgs e)
    {
        lblDPB.Text = "#3: ";          
    }

How can I make all these 3 works simultaneously?

Thanks

Answer 1

Clearing and populating the DropDownList on each postback messes up the selection in the list. Calling Items.Clear() empties the SelectedValue and sets the SelectedIndex to -1. After filling the list, the first item is selected. All that processing causes the SelectedIndexChanged event to fire at unexpected moments.

One way to avoid this problem is to save the selected values before calling Items.Clear(), and to set them back after refilling the lists:

protected void Page_Load(object sender, EventArgs e)
{
    ...

    string val1 = dpl1.SelectedValue;
    string val2 = dpl2.SelectedValue;
    string val3 = dpl3.SelectedValue;

    dpl1.Items.Clear();
    dpl2.Items.Clear();
    dpl3.Items.Clear();

    // Fill the lists here

    SafeSelectValue(dpl1, val1);
    SafeSelectValue(dpl2, val2);
    SafeSelectValue(dpl3, val3);
}

private void SafeSelectValue(ListControl lst, string value)
{
    // Makes sure that the value exists before selecting it
    if (lst.Items.FindByValue(value) != null)
    {
        lst.SelectedValue = value;
    }
}

By the way, in order to see the changes in the lists items, I needed to put the three DropDownLists inside an UpdatePanel with UpdateMode="Always":

<asp:UpdatePanel runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:DropDownList ID="dpl1" runat="server" OnSelectedIndexChanged="dpl1_OnSelectedIndexChanged" AutoPostBack="True" />
        <asp:DropDownList ID="dpl2" runat="server" OnSelectedIndexChanged="dpl2_OnSelectedIndexChanged" AutoPostBack="True" />
        <asp:DropDownList ID="dpl3" runat="server" OnSelectedIndexChanged="dpl3_OnSelectedIndexChanged" AutoPostBack="True" />
    </ContentTemplate>
</asp:UpdatePanel>