It Seems so Weird with DropDownList

Question

User1769015664 posted

The following code look pretty normal but it's behavior seems to be weird. If I click on any of the four DropDownList; it will create two DropDownList right above this table containing same values in it. What could be wrong with this code?

If I remove <Triggers> from the code then it works fine but I am trying to resolve the issue with Page flashing. 

<table style="width: 100%; background-color:antiquewhite">
    <tr>
            <td style="width:15%; text-align:right; background-color:silver" class="auto-style1">Test1</td>

            <asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                <td style="width:10%;"><asp:DropDownList ID="DropDownList1" runat="server" Width="95%" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList></td>
                <td style="width:10%;"><asp:DropDownList ID="DropDownList2" runat="server" Width="95%" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList></td>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                    <asp:AsyncPostBackTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
            <td style="width:15%; text-align:right; background-color:silver" class="auto-style1">Test2</td>
            <asp:UpdatePanel ID="UpdatePanel6" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                <td style="width:10%;"><asp:DropDownList ID="DropDownList3" Width="95%" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList></td>
                <td style="width:10%;"><asp:DropDownList ID="DropDownList4" Width="95%" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList></td>
                </ContentTemplate>
                 <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
                    <asp:AsyncPostBackTrigger ControlID="DropDownList4" EventName="SelectedIndexChanged" />
                </Triggers>
           </asp:UpdatePanel>

            <td style="width:15%;text-align:right; background-color:silver" class="auto-style1">Test Result</td>
            <td class="auto-style2" style="width:15%;"><input id="Text1" type="text" enabled="false" runat="Server" style="width:100%; border:none;"/></td>
    </tr>
</table>

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            string s = "";
        }

In page Load event:

                ListItem[] x1 = { new ListItem("1"), new ListItem("2"), new ListItem("3") };
                DropDownList1.Items.AddRange(x1);
                ListItem[] x2 = { new ListItem("9"), new ListItem("8"), new ListItem("7") };
                DropDownList2.Items.AddRange(x2);

                DropDownList3.Items.AddRange(x1);
                DropDownList4.Items.AddRange(x2);

Answer 1

User475983607 posted

The markup is invalid.  The Update panels are within a table bu not defined within a td.

Answer 2

User1769015664 posted

thanks!