ASP.NET UpdatePanel not working, it refreshes the whole page

Question

I'm new in using UpdatePanel, I Have 2 DropDownList: DropDownList_1 and DropDownList_2 where DropDownList_2 content will be dependent to DropDownList_1 selected value, here is my code:

ASPX:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList_1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged" DataSourceID="businessgroup" DataTextField="BusinessGroupName" DataValueField="Id"></asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList_1" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

<asp:DropDownList ID="DropDownList_2" runat="server" DataSourceID="jobposition" DataTextField="JobPositionName" DataValueField="Id"></asp:DropDownList>

CS:

protected void DropDownList_1_SelectedIndexChanged(object sender, EventArgs e)
{
    SqlDataSource1.SelectCommand = "SELECT DISTINCT * FROM [JobPosition] WHERE BusinessGroupID ="+DropDownList_1.SelectedValue;
    DropDownList_2.DataBind();
}

its working as stated above but what I doesn't want in my output is the whole page refreshes, I also tried removing AutoPostBack="true" in my DropDownList_1 but it stops working, what am I doing wrong in here? Thanks!

EDIT:

I also tried moving the DropDownList_2 inside UpdatePanel's ContentTemplate but still the whole page is refreshing.

Answer 1

Here is how you should do:

• If you want to refresh the second drop-down, than the second drop-down should be inside an update panel

• Set AutoPostBack="true" only for the second drop-down

• Set UpdateMode="Conditional" for the update panel (otherwise they will refresh every time)
• Set the AsyncPostBackTrigger of the panel to point to the first drop-down SelectedIndexChanged event
• Set ChildrenAsTriggers="true" for the Update panel

:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>     
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList_1_SelectedIndexChanged" DataSourceID="businessgroup" DataTextField="BusinessGroupName" DataValueField="Id"></asp:DropDownList>
                    <asp:DropDownList ID="DropDownList_2" runat="server" AutoPostBack="true" DataSourceID="jobposition" DataTextField="JobPositionName" DataValueField="Id"></asp:DropDownList>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="DropDownList_1" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>

The controls should reside in the same update panel, it's simpler this way.