当前位置: 首页 > news >正文

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

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

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


后端代码(C#)


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

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来接收后端发送的进度更新。
 

<!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>

http://www.lryc.cn/news/482910.html

相关文章:

  • 力扣 LeetCode 19. 删除链表的倒数第N个结点(Day2:链表)
  • 音频格式转换
  • npm list @types/node 命令用于列出当前项目中 @types/node 包及其依赖关系
  • 【Spring】Spring框架中有有哪些常见的设计模式
  • 提升百度排名的有效策略与技巧解析
  • 【Linux】Linux下查看cpu信息指令(top/mpstat/iostat/pidstat)说明
  • HDLBIts习题(3):使用冒号表示位宽时,冒号两端必须是常量
  • C++20协程详解
  • Chromium 中chrome.system.display扩展接口定义c++
  • 容器docker的ulimit
  • 一、HTML
  • 使用Geekbench6软件对真实和虚拟的苹果桌面系统(macOS)进行打分比较
  • lua入门教程:随机数
  • 华为大咖说 | 浅谈智能运维技术
  • creo toolkit二次开发学习之获取任意选择模型作为元件,并进行获取约束等
  • sanitize-html 防止 XSS(跨站脚本攻击)
  • 【JavaEE】文件io
  • FlinkPipelineComposer 详解
  • 蓝桥杯-洛谷刷题-day2(C++)
  • 16008.行为树(五)-自定义数据指针在黑板中的传递
  • javascript Vue
  • 《揭秘观察者模式:作用与使用场景全解析》
  • 【QT常用技术讲解】优化网络链接不上导致qt、qml界面卡顿的问题
  • 下划线命名json数组转java对象
  • 实测运行容器化Nginx服务器
  • 显示器接口种类 | 附图片
  • C++初阶——list
  • 软件设计师-排序算法
  • 即插即用篇 | YOLOv8 引入 代理注意力 AgentAttention
  • 020_Servlet_Mysql学生选课系统(新版)_lwplus87