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.

Answer 2

I found the fix, thanks to Cristina for reminding me to check the console errors. And just for reference to anyone who is having the same problem here is what I've done:

1. I have missing Ajax libraries, so I imported the MicrosoftAjax.js and MicrosoftAjaxWebService in this folder Scripts>WebForms>MSAjax.
2. After I imported the necessary Ajax library I've got this console error:

MicrosoftAjaxWebForms.js:6 Uncaught Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

What I did is add EnableEventValidation="false" inside this Ajax page, in <%Page %> directive.

And after that I have no longer full page reload and all is working now on how I wanted.

Answer 3

If your panel still posts back after you've set it up as per guidelines, check that you have not set ClientIDMode="Static" either for the specific control performing the callback or by causing the ClientIDMode to default to static inherited from either in web.config, the Page or parent containers.

Search your solution for ClientIDMode="Static" and either change this for inherited controls including the one triggering the postback, or explicitly set ClientIDMode="Predictable" or ClientIDMode="AutoID" for each of your controls that trigger a postback.

Answer 4

While you are working with update panel you have to register your events while refreshing the page for that you have to use Microsoft's PageRequestManager to re-subscribe every update.

You have to initialize your event in the document.ready(function(){}) of the javascript.

Ex: var test=Sys.WebForms.PageRequestManager.getInstance();