基于.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>