window.beforeunload提示未隐藏Ajax更新进度的问题求助

这个场景确实挺闹心的——Response.Redirect会先触发回发流程，让UpdateProgress先显示出来，而beforeunload的提示是在浏览器即将卸载页面时才弹出，等用户选择留在页面时，回发已经启动，进度条就卡在那儿了。不过我们可以通过前端提前拦截按钮点击，先确认用户意图再决定是否触发回发的方式来解决这个问题。

核心思路 #

放弃让按钮自动触发回发，改用前端自定义确认逻辑：

1. 用户点击按钮时，先弹出确认框询问是否要离开
2. 如果用户确认离开，再手动触发UpdatePanel的回发，执行后台的Response.Redirect
3. 如果用户取消，直接阻止回发，同时确保UpdateProgress不会被触发显示

具体实现代码 #

1. 调整ASPX页面的按钮和UpdateProgress #

给按钮添加前端点击事件，禁用默认提交行为，同时给UpdateProgress指定ID方便后续操作：

<asp:UpdatePanel runat="server" ID="ProductSelectorContainerPanel" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Button runat="server" ID="DoPartialPostBack" 
                    OnClick="DoPartialPostBack_Click" 
                    Text="Do Postback"
                    UseSubmitBehavior="false" <!-- 禁用默认submit行为，确保前端逻辑生效 -->
                    OnClientClick="return confirmLeaveAndPostBack();" />
    </ContentTemplate>
</asp:UpdatePanel>

<!-- 给UpdateProgress加ID，方便前端控制显示 -->
<asp:UpdateProgress runat="server" ID="PageUpdateProgress" 
                    AssociatedUpdatePanelID="ProductSelectorContainerPanel">
    <ProgressTemplate>
        <!-- 你的进度条内容，比如图片/文字 -->
        <img src="loading.gif" alt="加载中..." /> 正在跳转...
    </ProgressTemplate>
</asp:UpdateProgress>

2. 编写前端JavaScript逻辑 #

function confirmLeaveAndPostBack() {
    // 弹出自定义确认框（替换beforeunload的全局提示，针对这个按钮单独处理）
    var confirmLeave = confirm('Are you sure you want to leave?');
    
    if (confirmLeave) {
        // 用户确认离开，手动触发按钮的回发
        __doPostBack('<%= DoPartialPostBack.UniqueID %>', '');
    } else {
        // 用户取消离开，先隐藏可能已经显示的进度条
        var progressElement = document.getElementById('<%= PageUpdateProgress.ClientID %>');
        if (progressElement) {
            progressElement.style.display = 'none';
        }
        // 返回false阻止默认回发行为
        return false;
    }
    return false; // 手动触发回发后，阻止默认行为避免重复提交
}

// 保留全局beforeunload事件（处理其他离开场景：比如直接关标签页、输入URL跳转）
$(window).on('beforeunload', function() {
    return 'Are you sure you want to leave?';
});

3. 后台C#代码保持不变 #

protected void DoPartialPostBack_Click(object sender, EventArgs e)
{
    Response.Redirect("page2.aspx");
}

为什么这个方案有效？ #

• 我们把按钮的默认回发逻辑完全接管，确保用户确认离开后才会触发回发，从根源上避免了用户取消时UpdateProgress被误触发的问题。
• 全局的beforeunload事件仍然可以处理其他非按钮触发的页面离开场景，不会影响原有功能。
• UseSubmitBehavior="false"是关键，它让ASP.NET按钮生成普通的button而非submit按钮，确保前端的OnClientClick逻辑能优先执行。

内容的提问来源于stack exchange，提问作者Anurag.Desai