ASP.NET UpdatePanel 不工作，它刷新整個頁面

Question

我是使用UpdatePanel的新手，我有 2 個 DropDownList： DropDownList_1和DropDownList_2 ，其中DropDownList_2內容將依賴於DropDownList_1選擇的值，這是我的代碼：

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();
}

它的工作方式如上所述，但我不希望在我的 output 中刷新整個頁面，我還嘗試在我的 DropDownList_1 中刪除AutoPostBack="true"但它停止工作，我在這里做錯了什么？ 謝謝！

編輯：

我還嘗試將 DropDownList_2 移動到 UpdatePanel 的 ContentTemplate 中，但整個頁面仍然刷新。

Answer 1

這是你應該怎么做：

• 如果你想刷新第二個下拉菜單，那么第二個下拉菜單應該在更新面板內

• 僅為第二個下拉菜單設置AutoPostBack="true"

• 為更新面板設置UpdateMode="Conditional" （否則每次都會刷新）
• 設置面板的AsyncPostBackTrigger指向第一個下拉SelectedIndexChanged事件
• 為更新面板設置ChildrenAsTriggers="true"

:

<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>

控件應該位於同一個更新面板中，這樣更簡單。

Answer 2

我找到了解決方法，感謝 Cristina 提醒我檢查控制台錯誤。 我所做的僅供遇到同樣問題的任何人參考：

1. 我缺少 Ajax 個庫，因此我在此文件夾腳本>WebForms>MSAjax 中導入了 MicrosoftAjax.js 和 MicrosoftAjaxWebService。
2. 在我導入必要的 Ajax 庫后，我遇到了這個控制台錯誤：

MicrosoftAjaxWebForms.js:6 未捕獲的 Sys.WebForms.PageRequestManagerServerErrorException：Sys.WebForms.PageRequestManagerServerErrorException：回發或回調參數無效。 使用配置或頁面中的 <%@ Page EnableEventValidation="true" %> 啟用事件驗證。 出於安全目的，此功能驗證 arguments 回發或回調事件是否源自最初呈現它們的服務器控件。 如果數據有效且符合預期，請使用 ClientScriptManager.RegisterForEventValidation 方法注冊回發或回調數據以進行驗證。

我所做的是在該 Ajax 頁面內的 <%Page %> 指令中添加EnableEventValidation="false" 。

在那之后我不再重新加載整頁，現在一切都按照我想要的方式進行。

Answer 3

如果您的面板在您按照指南進行設置后仍然回發，請檢查您是否沒有為執行回調的特定控件設置ClientIDMode="Static" ，或者通過使 ClientIDMode 默認為 static 繼承自 web .config，頁面或父容器。

在您的解決方案中搜索ClientIDMode="Static"並針對繼承的控件（包括觸發回發的控件）更改此設置，或者為觸發回發的每個控件顯式設置ClientIDMode="Predictable"或ClientIDMode="AutoID" 。

Answer 4

當您使用更新面板時，您必須在刷新頁面時注冊您的事件，因為您必須使用 Microsoft 的 PageRequestManager 來重新訂閱每個更新。

您必須在javascript的document.ready(function(){})中初始化您的事件。

例如： var test=Sys.WebForms.PageRequestManager.getInstance();