如何在VS2013 ASP.NET Web Forms的UpdatePanel中设置等待光标？

我明白你遇到的问题了——在VS2013的Web Forms项目里，点击UpdatePanel内的按钮触发异步流程时，光标没变成等待状态，反而在流程结束后移到面板外才触发样式。这是因为你用后台代码控制光标样式的思路不对，光标是客户端的UI状态，服务器端代码没法实时同步这个变化，得靠前端JavaScript来处理才行。

问题根源 #

后台代码的样式设置，只会在页面初始渲染或者异步回发完成后，把样式嵌入到UpdatePanel的局部HTML里，这时候异步流程已经结束了，自然没法在流程运行时显示等待状态。而且这种局部的样式设置，还会导致光标样式只在UpdatePanel区域生效，移出去才触发的奇怪现象。

具体解决步骤 #

我们可以利用ASP.NET AJAX的PageRequestManager对象，监听异步回发的开始和结束事件，实时控制客户端的光标和等待图标：

1. 准备前端代码（页面里添加）

首先在你的ASPX页面里，加入以下代码：

<!-- 可选：添加一个居中显示的等待图标，记得替换成你自己的加载图片路径 -->
<div id="loadingSpinner" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
    <img src="images/loading.gif" alt="正在处理..." />
</div>

<script type="text/javascript">
    // 获取PageRequestManager实例，它负责管理UpdatePanel的异步回发
    var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();

    // 监听异步回发开始事件
    pageRequestManager.add_beginRequest(function(sender, args) {
        // 把整个页面的光标改成等待样式
        document.body.style.cursor = "wait";
        // 显示等待图标
        document.getElementById("loadingSpinner").style.display = "block";
        
        // 如果只想让UpdatePanel区域变光标，也可以单独设置面板：
        // document.getElementById('<%= 你的UpdatePanelID.ClientID %>').style.cursor = "wait";
    });

    // 监听异步回发结束事件（不管成功还是失败都会触发）
    pageRequestManager.add_endRequest(function(sender, args) {
        // 恢复默认光标
        document.body.style.cursor = "default";
        // 隐藏等待图标
        document.getElementById("loadingSpinner").style.display = "none";
        
        // 恢复UpdatePanel的光标样式（如果之前设置过）
        // document.getElementById('<%= 你的UpdatePanelID.ClientID %>').style.cursor = "default";
    });
</script>

2. 移除后台代码里的光标设置

把你后台代码中类似Page.Form.Style["cursor"] = "wait";或者其他设置光标样式的代码删掉，这些代码现在没用了，反而会干扰前端的逻辑。

3. 针对性优化（可选）

如果你只想在点击cmdAutoCaption按钮时触发等待状态，而不是所有异步回发，那就修改beginRequest的逻辑，判断触发回发的元素：

pageRequestManager.add_beginRequest(function(sender, args) {
    var triggerBtn = args.get_postBackElement();
    // 匹配你的按钮客户端ID
    if (triggerBtn.id === "<%= cmdAutoCaption.ClientID %>") {
        document.body.style.cursor = "wait";
        document.getElementById("loadingSpinner").style.display = "block";
    }
});

注意事项 #

• 确保你的页面已经添加了ScriptManager控件，PageRequestManager是ASP.NET AJAX的核心对象，必须依赖ScriptManager才能工作。
• 如果你的等待图标路径不对，记得修改src属性，换成你项目里实际的加载图片路径。

这样修改后，点击按钮触发异步流程时，页面光标会立刻变成等待样式，同时显示加载图标，流程结束后自动恢复，完全符合你的需求。

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