在Web应用中，长时间运行的任务是常见的情况。用户在等待这些任务完成时，能够实时了解进度会大大提升用户体验。SignalR库正是为了解决这类问题而设计的。通过SignalR，可以轻松实现进度条功能，向用户展示任务的实时进度。本文将指导如何在MVC应用程序中快速实现SignalR进度条。
要开始使用SignalR，首先需要将其添加到项目中。可以通过NuGet包管理器来实现。
Tools > NuGet Package Manager > Package Manager Console
在控制台中输入以下命令并按Enter键：
Install-Package Microsoft.AspNet.SignalR
Visual Studio将为安装SignalR。安装完成后，可以在项目的Startup.cs文件中映射SignalR到应用程序。
在Startup.cs文件中，需要配置SignalR。以下是一个配置示例：
using Microsoft.Owin;
using Owin;
[assembly: OwinStartupAttribute(typeof(SignalRProgressBarSimpleExample.Startup))]
namespace SignalRProgressBarSimpleExample
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
ConfigureAuth(app);
app.MapSignalR();
}
}
}
接下来，需要在_Layout.cshtml文件中包含一些脚本。
需要按照以下顺序包含脚本：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
jQuery和Bootstrap通常已经包含在MVC项目中，但也可以根据需要以任何方式包含它们。SignalR脚本可以从示例项目中下载。
在包含脚本之后，需要添加一些JavaScript代码来从服务器获取数据。
$(function() {
var progress = $.connection.progressHub;
console.log(progress);
progress.client.addProgress = function(message, percentage) {
ProgressBarModal("show", message + "" + percentage);
$("#ProgressMessage").width(percentage);
if (percentage == "100%") {
ProgressBarModal();
}
};
$.connection.hub.start().done(function() {
var connectionId = $.connection.hub.id;
console.log(connectionId);
});
});
在与服务器建立连接之前，需要创建一个SignalR Hub。
创建一个新的文件夹Hubs，并在其中创建一个名为ProgressHub.cs的类，该类继承自Hub。这个类是SignalR在服务器和客户端之间通信所必需的。
using System;
using Microsoft.AspNet.SignalR;
namespace SignalRProgressBarSimpleExample.Hubs
{
public class ProgressHub : Hub
{
}
}
在HomeController中，需要一个方法来处理客户端的请求，并在每次循环迭代时发送数据到客户端。
public JsonResult LongRunningProcess()
{
int itemsCount = 100;
for (int i = 0; i <= itemsCount; i++)
{
Thread.Sleep(500);
Functions.SendProgress("Process in progress...", i, itemsCount);
}
return Json("", JsonRequestBehavior.AllowGet);
}
using System;
using Microsoft.AspNet.SignalR;
using SignalRProgressBarSimpleExample.Hubs;
namespace SignalRProgressBarSimpleExample.Util
{
public class Functions
{
public static void SendProgress(string progressMessage, int progressCount, int totalItems)
{
var hubContext = GlobalHost.ConnectionManager.GetHubContext();
var percentage = (progressCount * 100) / totalItems;
hubContext.Clients.All.AddProgress(progressMessage, percentage + "%");
}
}
}