基于.NET 9实现实时进度条功能:前后端完整示例教程

要在基于.NET 9的应用中实现进度条功能,我们可以通过HttpContext.Response来发送实时的进度更新到前端。以下是一个简单的示例,展示了如何在ASP.NET Core应用中实现这一功能。

但是,我在.net framework4.7.2框架下,实际不了HttpContext.Response.WriteAsync,发贴求解决办法

后端代码(C#)

首先,我们需要创建一个ASP.NET Core控制器动作,该动作将模拟一个长时间运行的任务,并在任务执行过程中发送进度更新。

cs 复制代码
using Microsoft.AspNetCore.Mvc;
using System;
using System.Threading;
using System.Threading.Tasks;
[ApiController]
[Route("[controller]")]
public class ProgressController : ControllerBase
{
    [HttpGet("start")]
    public async Task StartLongRunningTask()
    {
        // 设置响应头,指示这是一个长时间运行的请求
        HttpContext.Response.Headers.Add("Connection", "keep-alive");
        HttpContext.Response.Headers.Add("Content-Type", "text/event-stream");
        HttpContext.Response.Headers.Add("Cache-Control", "no-cache");
        // 模拟长时间运行的任务
        for (int i = 0; i <= 100; i++)
        {
            // 发送进度更新
            await SendProgress(i);
            // 模拟工作负载
            await Task.Delay(100);
        }
        // 任务完成,关闭连接
        await HttpContext.Response.Body.FlushAsync();
        HttpContext.Response.Body.Close();
    }
    private async Task SendProgress(int percentage)
    {
        var data = $"data: {percentage}\n\n";
        var bytes = System.Text.Encoding.UTF8.GetBytes(data);
        await HttpContext.Response.Body.WriteAsync(bytes, 0, bytes.Length);
        await HttpContext.Response.Body.FlushAsync();
    }
}

二、前端代码(HTML + JavaScript)

接下来,我们需要创建一个简单的HTML页面,用于显示进度条,并使用JavaScript来接收后端发送的进度更新。

cs 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Example</title>
    <style>
        #progressBar {
            width: 0%;
            height: 30px;
            background-color: green;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="progressBar">0%</div>
    <button onclick="startProgress()">Start Task</button>
    <script>
        function startProgress() {
            const eventSource = new EventSource('/Progress/start');
            eventSource.onmessage = function(event) {
                const progressBar = document.getElementById('progressBar');
                progressBar.style.width = event.data + '%';
                progressBar.textContent = event.data + '%';
            };
            eventSource.onerror = function() {
                eventSource.close();
                console.error('EventSource failed.');
            };
        }
    </script>
</body>
</html>
相关推荐
从孑开始2 小时前
ManySpeech.MoonshineAsr 使用指南
人工智能·ai·c#·.net·私有化部署·语音识别·onnx·asr·moonshine
玩泥巴的10 小时前
.NET驾驭Word之力:基于规则自动生成及排版Word文档
c#·word·.net·com互操作
专注VB编程开发20年10 小时前
VB.NET多线程排序算法实现:LINQ与正则表达式方法
排序算法·.net·linq
EQ-雪梨蛋花汤15 小时前
【踩坑记录】从“正在还原所需的工具包”说起:一次 .NET 工程包还原失败的完整排查实录
.net
喵叔哟16 小时前
63.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--新增功能--预算告警
运维·微服务·.net
专注VB编程开发20年16 小时前
VB.NET2003和VB2008可以导入VB6项目
.net·vb.net·vb6·vb2008
喵叔哟18 小时前
62.【.NET8 实战--孢子记账--从单体到微服务--转向微服务】--新增功能--自训练ML模型
微服务·架构·.net
追逐时光者1 天前
将 EasySQLite 解决方案文件格式从 .sln 升级为更简洁的 .slnx
后端·.net
专注VB编程开发20年2 天前
C#,VB.NET数组去重复,提取键名和重复键和非重复键
c#·.net·linq·取唯一键·去重复·重复数量
Full Stack Developme2 天前
java.net 包详解
java·python·.net