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

server/2024/11/16 21:06:13/

要在基于.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.ppmy.cn/server/142463.html

相关文章

坚持燃油新能源双赛道发力,MG ES5MG7 2025款亮相广州车展

11月15日&#xff0c;第22届广州车展正式启幕&#xff0c;上汽MG名爵携“B级车王炸”MG7 2025款、全球高标准纯电后驱SUV MG ES5、“A级轿跑天花板”新一代MG5等明星阵容重磅登场&#xff0c;并通过一系列技术创新成果及精彩活动展示&#xff0c;尽显百年品牌独特魅力与强大实力…

EXPLAIN优化慢SQL

项目中发现数据查询很慢&#xff0c;导致前端超时等待的问题。经过日志打印发现&#xff0c;查询sql耗时10秒以上&#xff0c;相关sql如下&#xff1a; select distincttablemodel.*from pjtask_model tablemodelJOIN buss_type_permission a ON (tablemodel.fields_data_id …

Design Compiler:Topographical Workshop Lab2

相关阅读 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 本文是对Synopsys Design Compiler Topographical/Graphical Workshop Lab Guide中Lab2的翻译&#xff0c;Lab文件可以从以下链接获取。 Synopsys Design Co…

文献阅读 | Nature Communications:使用自适应图注意自动编码器从空间解析的转录组学中解读空间域

文献介绍 文献题目&#xff1a; 使用自适应图注意自动编码器从空间解析的转录组学中解读空间域 研究团队&#xff1a; 张世华&#xff08;中国科学院数学与系统科学研究院&#xff09; 发表时间&#xff1a; 2022-04-01 发表期刊&#xff1a; Nature Communications 影响因子…

厦大南洋理工最新开源,一种面向户外场景的特征-几何一致性无监督点云配准方法

导读 本文提出了INTEGER&#xff0c;一种面向户外点云数据的无监督配准方法&#xff0c;通过整合高层上下文和低层几何特征信息来生成更可靠的伪标签。该方法基于教师-学生框架&#xff0c;创新性地引入特征-几何一致性挖掘&#xff08;FGCM&#xff09;模块以提高伪标签的准确…

LabVIEW 使用 Snippet

在 LabVIEW 中&#xff0c;Snippet&#xff08;代码片段&#xff09; 是一个非常有用的功能&#xff0c;它允许你将 一小段可重用的代码 保存为一个 图形化的代码片段&#xff0c;并能够在不同的 VI 中通过拖放来使用。 什么是 Snippet&#xff1f; Snippet 就是 LabVIEW 中的…

centos rich 美观打印日志

文章目录 步骤 1: 安装 Python 和 pip步骤 2: 安装 rich-cli步骤 3: 验证安装步骤 4: 使用 rich-cli参考 在 CentOS 上安装 rich-cli 工具&#xff0c;你可以按照以下步骤进行操作。rich-cli 是一个命令行工具&#xff0c;用于将 rich 库的功能&#xff08;例如美化输出&#x…

【ChatGPT】让ChatGPT生成批判性思维问题的回答

让ChatGPT生成批判性思维问题的回答 批判性思维是一种通过逻辑推理、分析和评估信息来获得更深刻理解的能力。在与ChatGPT互动时&#xff0c;可以通过设计带有挑战性和多维度的问题&#xff0c;让它展示出对主题的深入探讨和批判性思维。本篇文章将提供如何利用Prompt设置来引…