如何关闭AjaxControlToolkit.ModalPopupExtender弹窗时避免页面重载

核心问题分析 #

服务器端按钮btnCloseMessage点击会触发整页回发，这是导致页面重载和验证错误的根本原因——即使按钮的服务器端事件只有mpeMessage.Hide()，回发机制仍会执行页面验证并刷新页面。

具体解决方案 #

方案1：改造服务器端关闭按钮，彻底取消回发 #

直接在按钮上添加客户端点击逻辑，阻止回发并调用弹窗的客户端隐藏方法，完全不需要服务器端介入：

<asp:Button ID="btnCloseMessage" runat="server" Text="关闭" 
    OnClientClick="$find('<%= mpeMessage.ClientID %>').hide(); return false;" />

• 说明：$find()是AjaxControlToolkit获取客户端控件实例的方法，用<%= mpeMessage.ClientID %>确保获取到正确的控件ID（避免命名容器导致的ID变化）；return false会阻止按钮的默认回发行为。
• 可以直接移除该按钮的服务器端OnClick事件（因为已经不需要执行服务器端的Hide()了）。

方案2：保留服务器端逻辑但禁用验证+局部刷新 #

如果必须保留服务器端代码（比如需要额外执行其他逻辑），可以做以下调整：

1. 关闭按钮的验证触发：

<asp:Button ID="btnCloseMessage" runat="server" Text="关闭" 
    OnClick="btnCloseMessage_Click" CausesValidation="False" />

2. 确保按钮位于upnlMessage内部：这样点击只会触发UpdatePanel的局部刷新，不会重载整个页面。
3. 可选优化：将UpdatePanel的UpdateMode改为Conditional，减少不必要的刷新：

<asp:UpdatePanel ID="upnlMessage" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <!-- 弹窗相关控件 -->
        <asp:Button ID="btnCloseMessage" runat="server" ... />
    </ContentTemplate>
</asp:UpdatePanel>

方案3：优化客户端按钮的closeAndRefresh方法 #

如果使用客户端按钮btnClose，修改其绑定的方法，去掉不必要的页面刷新逻辑：

function closeAndRefresh() {
    // 获取弹窗客户端实例
    var modalPopup = $find('<%= mpeMessage.ClientID %>');
    if (modalPopup) {
        modalPopup.hide();
    }
    // 若不需要刷新页面，删除下面这行
    // location.reload();
}

关键注意事项 #

• 优先用客户端直接关闭弹窗，避免依赖服务器端mpeMessage.Hide()，这是最高效且无回发的方式。
• 所有关闭弹窗的按钮都要设置CausesValidation="False"，避免触发页面其他验证控件的错误提示。

内容的提问来源于stack exchange，提问作者Colin Plater