点击按钮触发UpdateProgress加载时，如何阻止UpdatePanel内其他按钮点击？

嗨，这个场景我太熟悉了！UpdatePanel在发起异步请求时，默认确实不会限制用户点击其他按钮，很容易造成重复请求或者混乱。下面给你两种方向的解决方案，按需选择：

最直接的思路是利用UpdatePanel的异步请求生命周期事件，在请求开始时锁定交互，结束后恢复。

1. 前端JavaScript控制按钮禁用/遮罩 #

UpdatePanel依赖的Sys.WebForms.PageRequestManager提供了BeginRequest和EndRequest事件，刚好可以用来控制按钮状态：

// 页面加载完成后注册事件
window.onload = function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
};

function BeginRequestHandler(sender, args) {
    // 获取你的UpdatePanel
    var updatePanel = document.getElementById('<%= UpdatePanel1.ClientID %>');
    // 禁用Panel内所有按钮
    var buttons = updatePanel.getElementsByTagName('button');
    for(let i = 0; i < buttons.length; i++){
        buttons[i].disabled = true;
        buttons[i].style.cursor = 'not-allowed';
    }
    // 可选：给Panel加半透明遮罩，彻底阻止点击（体验更好）
    var mask = document.createElement('div');
    mask.id = 'tempMask';
    mask.style.cssText = 'position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7); z-index:100;';
    updatePanel.style.position = 'relative';
    updatePanel.appendChild(mask);
}

function EndRequestHandler(sender, args) {
    var updatePanel = document.getElementById('<%= UpdatePanel1.ClientID %>');
    // 恢复按钮可用
    var buttons = updatePanel.getElementsByTagName('button');
    for(let i = 0; i < buttons.length; i++){
        buttons[i].disabled = false;
        buttons[i].style.cursor = 'pointer';
    }
    // 移除临时遮罩
    var mask = document.getElementById('tempMask');
    if(mask) mask.remove();
}

这种方式能在请求发起瞬间就锁定所有按钮，用户看不到无效点击，体验很流畅。

2. 后端状态标记（备选方案） #

如果前端脚本有兼容性问题，可以在后端用ViewState或Session标记请求状态，拦截重复请求：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始化处理状态
        ViewState["IsProcessing"] = false;
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    // 如果正在处理请求，直接返回
    if ((bool)ViewState["IsProcessing"]) return;
    
    ViewState["IsProcessing"] = true;
    try
    {
        // 你的业务逻辑，比如模拟延迟
        System.Threading.Thread.Sleep(2000);
        string text1 = "You clicked button1";
        // 这里可以把text1存到Session或其他地方
    }
    finally
    {
        // 无论成功失败，都恢复状态
        ViewState["IsProcessing"] = false;
    }
}

注意：这种方式是后端拦截，用户点击后页面没反应可能会困惑，所以优先推荐前端方案。

如果觉得UpdateProgress不够灵活，也可以完全自定义加载效果，甚至替换UpdatePanel的异步方式：

1. 自定义全局加载遮罩 #

不用UpdateProgress，自己写一个全屏/Panel内的遮罩层，请求时显示，结束后隐藏：
首先在页面添加遮罩HTML：

<!-- 全局加载遮罩 -->
<div id="globalLoadingMask" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); z-index:9999;">
    <img src="your-loading-gif-path.gif" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px;" alt="加载中..." />
</div>

然后用之前的PageRequestManager事件控制显示：

window.onload = function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(function() {
        document.getElementById('globalLoadingMask').style.display = 'block';
    });
    prm.add_endRequest(function() {
        document.getElementById('globalLoadingMask').style.display = 'none';
    });
};

这种遮罩会覆盖整个页面，彻底阻止用户点击任何元素，比UpdateProgress的提示更直观。

2. 用jQuery AJAX替代UpdatePanel（更现代的方案） #

如果项目允许，可以抛弃UpdatePanel，用原生AJAX或jQuery来处理请求，完全控制交互流程：
前端按钮可以用普通HTML按钮（或服务器按钮加OnClientClick="return false;"阻止回发）：

<button class="ajax-btn" data-btn-text="You clicked button1">Button1</button>
<button class="ajax-btn" data-btn-text="You clicked button2">Button2</button>
<!-- 加载遮罩 -->
<div id="loadingMask" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); z-index:9999;">
    <img src="loading.gif" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);" />
</div>

然后写jQuery脚本：

$(function(){
    $('.ajax-btn').click(function(){
        var $this = $(this);
        // 禁用所有按钮
        $('.ajax-btn').prop('disabled', true).css('cursor', 'not-allowed');
        // 显示遮罩
        $('#loadingMask').show();

        var btnText = $this.data('btn-text');
        $.ajax({
            url: '<%= Page.ResolveUrl("~/YourPage.aspx/SaveButtonText") %>',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ buttonText: btnText }),
            success: function(response){
                // 请求成功后的逻辑，比如提示用户
                console.log('保存成功：', response.d);
            },
            error: function(){
                alert('请求失败，请重试');
            },
            complete: function(){
                // 请求完成后恢复按钮和隐藏遮罩
                $('.ajax-btn').prop('disabled', false).css('cursor', 'pointer');
                $('#loadingMask').hide();
            }
        });
        return false;
    });
});

后台需要添加一个WebMethod来处理请求：

[System.Web.Services.WebMethod]
public static string SaveButtonText(string buttonText)
{
    // 这里处理文本存储逻辑，比如存到Session或数据库
    System.Threading.Thread.Sleep(2000); // 模拟延迟
    return buttonText;
}

这种方式完全脱离了UpdatePanel的限制，交互更灵活，也能很好地阻止重复点击，适合对前端体验要求较高的场景。

内容的提问来源于stack exchange，提问作者MEGHA POOJARY