asp.net 异步怎样实现异步任务进度反馈 - 问答

在ASP.NET中，实现异步任务进度反馈通常涉及以下几个步骤：

创建异步任务：使用async和await关键字来创建异步任务。
跟踪任务进度：在异步任务中定期更新任务的进度。
更新前端进度：将任务的进度反馈到前端页面。

下面是一个简单的示例，展示了如何在ASP.NET中实现异步任务进度反馈：

1. 创建异步任务

首先，创建一个异步方法来执行实际的任务。这个方法将模拟一个耗时的操作，并定期更新任务的进度。

public class AsyncTaskService
{
    public async Task<string> PerformAsyncTask(int duration)
    {
        for (int i = 0; i <= duration; i++)
        {
            await Task.Delay(1000); // 模拟耗时操作
            var progress = (double)i / duration * 100;
            UpdateProgress(progress);
        }
        return "任务完成";
    }

    private void UpdateProgress(double progress)
    {
        // 这里可以调用前端的方法来更新进度
        // 例如，通过SignalR或其他方式
    }
}

2. 更新前端进度

在前端页面中，可以使用JavaScript来监听后端传递的进度更新，并更新页面的显示。

<!DOCTYPE html>
<html>
<head>
    <title>异步任务进度反馈</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>异步任务进度反馈示例</h1>
    <div id="progress">进度: 0%</div>
    <script>
        $(document).ready(function() {
            // 假设这是从后端获取的进度更新方法
            function updateProgress(progress) {
                $('#progress').text('进度: ' + progress + '%');
            }

            // 模拟异步任务调用
            $.ajax({
                url: '/AsyncTask',
                method: 'POST',
                data: { duration: 10 },
                success: function(response) {
                    console.log(response);
                },
                complete: function() {
                    console.log('异步任务完成');
                }
            });
        });
    </script>
</body>
</html>

3. 在ASP.NET MVC控制器中处理请求

在ASP.NET MVC控制器中，可以创建一个方法来启动异步任务，并通过SignalR或其他方式将进度反馈给前端。

public class AsyncTaskController : Controller
{
    private readonly AsyncTaskService _asyncTaskService;

    public AsyncTaskController(AsyncTaskService asyncTaskService)
    {
        _asyncTaskService = asyncTaskService;
    }

    [HttpPost]
    public async Task<IActionResult> StartAsyncTask(int duration)
    {
        await _asyncTaskService.PerformAsyncTask(duration);
        return Json(new { success = true, message = "任务开始" });
    }
}

4. 使用SignalR进行实时通信

为了实现实时的进度更新，可以使用SignalR库。首先，安装SignalR包：

Install-Package Microsoft.AspNetCore.SignalR.Core

然后，创建一个SignalR Hub来处理进度更新：

public class ProgressHub : Hub
{
    public async Task UpdateProgress(double progress)
    {
        await Clients.All.SendAsync("UpdateProgress", progress);
    }
}

在Startup.cs中配置SignalR：

public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        endpoints.MapSignalR();
    });
}

最后，在前端页面中使用SignalR客户端来连接Hub并接收进度更新：

<!DOCTYPE html>
<html>
<head>
    <title>异步任务进度反馈</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-signalr/1.1.4/signalr.min.js"></script>
</head>
<body>
    <h1>异步任务进度反馈示例</h1>
    <div id="progress">进度: 0%</div>
    <script>
        $(document).ready(function() {
            const connection = new signalR.HubConnectionBuilder().withUrl("/progressHub").build();

            connection.on("UpdateProgress", function(progress) {
                $('#progress').text('进度: ' + progress + '%');
            });

            connection.start().then(function() {
                console.log('SignalR连接已建立');
                $.ajax({
                    url: '/AsyncTask',
                    method: 'POST',
                    data: { duration: 10 },
                    success: function(response) {
                        console.log(response);
                        connection.invoke("UpdateProgress", 0); // 启动任务并发送初始进度
                    },
                    complete: function() {
                        console.log('异步任务完成');
                    }
                });
            }).catch(function(error) {
                console.error('SignalR连接失败:', error);
            });
        });
    </script>
</body>
</html>

通过以上步骤，你可以在ASP.NET中实现异步任务的进度反馈。

0 赞

0 踩