asp.net 在客户端显示服务器端任务处理进度条的探讨

一、技术原理简介

在 ASP.NET 中，我们可以使用 AJAX 技术来实现异步通信，从而达到在不刷新整个页面的情况下更新页面内容的目的。其中，可以使用 UpdatePanel 控件实现部分更新，也可以使用 jQuery 或者原生 JavaScript 的 AJAX 方法手动处理异步请求和响应。

而在处理较为耗时的服务器端任务时，我们可以使用异步处理方法，如异步页面方法、异步 Web 服务、异步控件、异步模型等，以避免阻塞 UI 线程和浪费服务器资源。同时，为了给用户提供更好的反馈，可以通过 AJAX 技术实时更新任务处理进度条，让用户感知任务完成度和剩余时间等信息。

二、代码示例一

下面是一个使用 UpdatePanel 控件和 ASP.NET AJAX 基础库实现的简单进度条更新示例。具体步骤如下：

1. 在 HTML 中添加 UpdatePanel 控件。

<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <!-- 此处放置需要更新的区域 -->
        <div id="progressWrapper">
            <div id="progressBar"></div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

1. 定义 JavaScript 函数，用于定时获取当前任务进度并更新进度条。

// 每 1 秒钟获取一次任务进度
window.setInterval(function () {
    $.ajax({
        type: "POST",
        url: "MyPage.aspx/GetTaskProgress",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var progress = data.d; // 获取任务进度
            $("#progressBar").css({ "width": progress + "%" }); // 更新进度条宽度
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText);
        }
    });
}, 1000);

1. 在服务器端，实现名为 "GetTaskProgress" 的 Web 方法，返回当前任务进度值。

[WebMethod]
public static int GetTaskProgress()
{
    // 获取当前任务进度值
    int progress = TaskManager.CurrentProgress;
    return progress;
}

如此一来，每 1 秒钟，浏览器就会通过 AJAX 请求获取当前任务的进度，并更新页面中指定的进度条。

代码示例二

下面是一个使用 SignalR 实时更新进度条的高级示例。具体步骤如下：

1. 在项目中安装 SignalR 库。

PM> Install-Package Microsoft.AspNet.SignalR

1. 定义名为 "MyHub" 的 SignalR 中心，用于实时通知客户端任务进度。

using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;

public class MyHub : Hub
{
    // 发送任务进度更新通知
    public static async Task UpdateProgress(int progress)
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
        await hubContext.Clients.All.updateProgress(progress);
    }
}

1. 在客户端 HTML 中添加 JavaScript 代码，侦听 SignalR 中心发送的进度更新通知，并更新页面中的进度条。

<!-- 加载 SignalR 库 -->
<script src="~/Scripts/jquery.signalR-2.4.1.min.js"></script>
<!-- 连接 SignalR 中心 -->
<script src="/signalr/hubs"></script>
<script>
    $(function() {
        // 连接 SignalR 中心
        var hub = $.connection.myHub;
        $.connection.hub.start().done(function () {
            console.log("SignalR connected.");
        });
        // 接收 SignalR 中心发来的进度更新消息
        hub.client.updateProgress = function (progress) {
            $("#progressBar").css({ "width": progress + "%" }); // 更新进度条宽度
        };
    });
</script>

1. 在服务器端，调用名为 "PerformTask" 的异步方法，并在处理过程中调用 "MyHub.UpdateProgress" 方法实时通知客户端任务进度。

public async Task PerformTask()
{
    // 处理任务过程中分段更新进度
    for (int i = 0; i <= 100; i += 10) {
        await Task.Delay(100);
        TaskManager.CurrentProgress = i;
        await MyHub.UpdateProgress(i);
    }
    // 处理任务完成后通知客户端
    await Clients.Caller.taskCompleted("Task completed.");
}

通过上述示例，我们可以了解到，使用 ASP.NET 和 AJAX 实现进度条更新可以比较简单地实现，但是实时度略低，适合处理一些耗时较短的任务。而使用 SignalR 实现进度条更新则更加强大和灵活，可以实时反馈任务进度的变化，但相应的也更为复杂。需要根据项目需求和技术背景选择不同的实现方式。