.Net Framework 4.8下按钮点击后异步多次更新进度标签的方法

我有一个基于.NET Framework 4.8搭建的WebForms网站，点击按钮后会按顺序同步执行大量远程服务器调用，操作数量可达数千个，且每个操作响应耗时数秒。我希望页面上有一个标签实时显示当前进度，例如“1/1000操作已执行”“当前操作：Boot”，请问该如何实现？

初始模拟代码 #

前端页面代码 #

<asp:Button ID="StartButton_Click" OnClick="StartButton_Click" Text="Start" runat="server"/>
<asp:UpdatePanel ID="ProgressUpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Label ID="ProgressLabel" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
    </Triggers>
</asp:UpdatePanel>

后端处理代码 #

protected void StartButton_Click(object sender, EventArgs e)
{
    List<string> actions = (List<string>)Enumerable.Repeat("0", 100);
    processItem(actions, 0);
}

private void processItem(List<string> items, int index)
{
    if(index >= items.Count)
    {
        return;
    }
    else
    {
        System.Threading.Thread.Sleep(3000); // 模拟远程调用耗时
        /* 这里无法更新ProgressLabel.Text，因为页面在返回客户端前无法更新任何内容 */
        processItem(items, index + 1);
    }
}

已尝试的Timer轮询方案 #

前端修改代码 #

<asp:Button ID="StartButton_Click" OnClick="StartButton_Click" Text="Start" runat="server"/>
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="1000" Enabled="false" />
<asp:UpdatePanel ID="ProgressUpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Label ID="ProgressLabel" runat="server"></asp:Label>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" />
    </Triggers>
</asp:UpdatePanel>

后端修改代码 #

static int currentCount = 0; // 由processItem方法更新
static int totalCount = 0;

protected void StartButton_Click(object sender, EventArgs e)
{
    List<string> actions = (List<string>)Enumerable.Repeat("0", 100);
    totalCount = actions.Count;
    currentCount = 0;
    Timer1.Enabled = true;
    // 将任务放到后台线程执行，避免阻塞页面请求
    System.Threading.Tasks.Task.Run(() => processItem(actions, 0));
}

private void processItem(List<string> items, int index)
{
    if(index >= items.Count)
    {
        Timer1.Enabled = false; // 任务完成后停止Timer
        return;
    }
    else
    {
        System.Threading.Thread.Sleep(3000);
        currentCount = index + 1;
        processItem(items, index + 1);
    }
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    ProgressLabel.Text = $"{currentCount}/{totalCount} actions performed";
}

更优解决方案：使用SignalR实时推送进度 #

Timer轮询会产生多余请求，SignalR可实现服务器主动向客户端推送进度，效率更高，实时性更好。

步骤1：安装SignalR NuGet包 #

在NuGet包管理器中安装Microsoft.AspNet.SignalR（适配.NET Framework 4.8）

步骤2：创建SignalR Hub类 #

using Microsoft.AspNet.SignalR;

public class ProgressHub : Hub
{
    // 核心用于服务器主动推送，无需额外客户端调用方法
}

步骤3：配置SignalR路由（Global.asax.cs） #

using System;
using System.Web.Routing;
using Microsoft.AspNet.SignalR;

public class Global : System.Web.HttpApplication
{
    protected void Application_Start(object sender, EventArgs e)
    {
        // 注册SignalR路由
        RouteTable.Routes.MapHubs();
        // 其他页面初始化代码...
    }
}

步骤4：修改前端页面，引入SignalR并监听进度 #

<asp:Button ID="StartButton" OnClick="StartButton_Click" Text="Start" runat="server"/>
<asp:Label ID="ProgressLabel" runat="server"></asp:Label>

<!-- 引入依赖脚本 -->
<script src="Scripts/jquery-3.5.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.3.min.js"></script>
<!-- SignalR自动生成的Hub代理脚本 -->
<script src="/signalr/hubs"></script>

<script>
    $(function () {
        // 连接到ProgressHub
        var progressHub = $.connection.progressHub;

        // 定义接收服务器进度推送的客户端方法
        progressHub.client.updateProgress = function (current, total, currentAction) {
            $('#<%= ProgressLabel.ClientID %>').text(`${current}/${total}操作已执行，当前操作：${currentAction}`);
        };

        // 启动SignalR连接
        $.connection.hub.start().done(function () {
            console.log("SignalR连接成功");
        });
    });
</script>

步骤5：修改后端代码，通过SignalR推送进度 #

using Microsoft.AspNet.SignalR;

public partial class YourPage : System.Web.UI.Page
{
    protected void StartButton_Click(object sender, EventArgs e)
    {
        List<string> actions = new List<string>();
        // 模拟操作列表，可替换为实际业务操作名
        for (int i = 0; i < 100; i++)
        {
            actions.Add($"Boot_{i+1}");
        }
        int total = actions.Count;

        // 将耗时任务放到后台线程执行，避免阻塞页面请求
        System.Threading.Tasks.Task.Run(() =>
        {
            for (int i = 0; i < total; i++)
            {
                // 模拟远程调用耗时
                System.Threading.Thread.Sleep(3000);
                string currentAction = actions[i];

                // 获取Hub上下文，向所有客户端推送进度
                var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
                hubContext.Clients.All.updateProgress(i + 1, total, currentAction);
            }
        });
    }
}

方案对比 #

• Timer轮询：实现简单，但会产生周期性冗余请求，实时性依赖轮询间隔，服务器负担随轮询频率增加而上升。
• SignalR实时推送：服务器主动推送进度，无多余请求，实时性拉满，适合大量长时间操作场景，仅需额外配置SignalR环境。

注意：无论采用哪种方案，都不能在页面请求线程中直接执行耗时操作，必须放到后台线程（如Task.Run），否则会阻塞页面响应，导致进度更新逻辑失效。

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