在ASP.NET中，實現異步任務進度反饋通常涉及以下幾個步驟：
async和await關鍵字來創建異步任務。下面是一個簡單的示例，展示了如何在ASP.NET中實現異步任務進度反饋：
首先，創建一個異步方法來執行實際的任務。這個方法將模擬一個耗時的操作，并定期更新任務的進度。
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或其他方式
}
}
在前端頁面中，可以使用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>
在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 = "任務開始" });
}
}
為了實現實時的進度更新，可以使用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中實現異步任務的進度反饋。
