asp.net the page is loaded even thouhg i am using update panel

Question

I have three taps. with drop down list as this:

I want that when I change the Drop down list, I want to do something in the server side and then update the first two tabs. I can do that.

my problem

If I were in the second tab and I changed the drop down, the page is loaded and set to the first tap.

I tried to

I tried to surrown the table in the second tab with update panel like this:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
                <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                <table id="BookingTableTomorrow" runat="server" class="tableResultClass">
                    <tr>
                        <th>ID</th>
                        <th>PlanTime</th>
                    </tr>
                </table>
                </ContentTemplate>
                </asp:UpdatePanel>

see the bellow all code, and note that I have another update panel in the third tab, and that third tab is working perfectly

<div id="tabs">
            <ul>
                <li><a href="#tabs-1">Today</a></li>
                <li><a href="#tabs-2">Tomorrow</a></li>
                <li><a href="#tabs-3">Any Date</a></li>
                <label style="float: right">
                    <asp:DropDownList AutoPostBack="true" runat="server" ID="mealTimeSelector" OnSelectedIndexChanged="TodayTab_Click">
                        <asp:ListItem Value="1">Breakfast</asp:ListItem>
                        <asp:ListItem Value="2">Lunch</asp:ListItem>
                        <asp:ListItem Value="3">Dinner</asp:ListItem>
                    </asp:DropDownList>
                </label>
            </ul>
            <div id="tabs-1">
                <table id="BookingTable" runat="server" class="tableResultClass">
                    <tr>
                        <th>ID</th>
                        <th>PlanTime</th>
                    </tr>
                </table>
            </div>
            <div id="tabs-2">
                <div id="circleG" style="margin-left: auto; margin-right: auto; padding-top: 50px; padding-bottom: 50px;">
                    <div id="circleG_1" class="circleG"></div>
                    <div id="circleG_2" class="circleG"></div>
                    <div id="circleG_3" class="circleG"></div>
                </div>
                <asp:ScriptManager ID="ScriptManager1" runat="server" />
                <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                <table id="BookingTableTomorrow" runat="server" class="tableResultClass">
                    <tr>
                        <th>ID</th>
                        <th>PlanTime</th>
                    </tr>
                </table>
                </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div id="tabs-3">
                <p>
                    Date:
                    <input type="text" id="datepicker" runat="server">
                </p>


                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="BookingForDate" runat="server" OnClick="BookingForDate_Click" Text="Search" />
                        <span style="color: red" id="errorDateMessage" runat="server"></span>
                        <div runat="server" id="circleG2" style="margin-left: auto; margin-right: auto; margin-left: 400px; padding-bottom: 60px;">
                            <div id="circleG_1" class="circleG"></div>
                            <div id="circleG_2" class="circleG"></div>
                            <div id="circleG_3" class="circleG"></div>
                        </div>
                        <table id="DateBookingTable" runat="server" class="tableResultClass">
                            <tr>
                                <th>ID</th>
                                <th>PlanTime</th>
                            </tr>
                        </table>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>

Answer 1

You can set a the dropdownlist as asynchronous postback trigger...

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
 <ContentTemplate>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Dropdownlist1" />
 </Triggers>
 </asp:UpdatePanel>