C#使用SignalR实现进度条

需求布景产品觉得在后台处理数据时给前端加个进度条

项目结构.ENTframework4.5MVC5.0
Nuget引进Microsoft.Owin系列2.0.2
Nuget引进Microsoft.AspNet.SignalR系列2.0.3
服务器代码挑选已安装>VisualC#>Web>SignalR，然后挑选SignalRHub类(v2)

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingXXX.WMS.Core.Log;usingMicrosoft.AspNet.SignalR;namespaceXXX.WebUI
{publicclassSaleBackHub:Hub
{privatevoidSend(stringconnectionId,stringpercent)
{//CalltheaddNewMessageToPagemethodtoupdateclients.try{
Clients.Client(connectionId).updateProgressbar(percent);
}catch(Exceptionex)
{
LoggerManager.GetInstance().Fatal(ex);
}
}publicstringGetConnectionId()
{returnthis.Context.ConnectionId;
}
}
}
服务端调用前端action更新进度条
1//运用外部方法调用Hub类方法2varsaleBackHub=Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext();3varpercent=0;4if(!string.IsNullOrWhiteSpace(requestDto.ProgressbarKey))5{6percent=(int)((decimal)++progressCount/(decimal)saleBackModelListCount*100);7try8{9//调用前端action更新进度条10saleBackHub.Clients.Client(requestDto.ProgressbarKey).updateProgressbar(percent.ToString());11}12catch(Exceptionex)13{14throw;15}16}
服务增加Starup.cs
usingSystem;usingSystem.Threading.Tasks;usingMicrosoft.Owin;usingOwin;
[assembly:OwinStartup(typeof(Frxs.WMS.Management.WebUI.Startup))]namespacexxx.WMS.Management.WebUI
{publicclassStartup
{publicvoidConfiguration(IAppBuilderapp)
{//有关如何装备应用程序的详细信息，请访问https://go.microsoft.com/fwlink/?LinkID=316888app.MapSignalR();
}
}
}
前端代码
对应页面引进signalR.js
<scriptsrc=”@Url.Content(“~/Scripts/signalR/jquery.signalR-2.0.3.min.js“)”type=”text/javascript”>script><scriptsrc=”~/signalr/hubs”>script>
初始化signalR衔接界说后端推送action渲染进度条本次用的是jeasyui进度条弹窗
varchat;varchatConnectionId;functioninitchatHub(){//Referencetheauto-generatedproxyforthehub.chat=$.connection.saleBackHub;
$.connection.hub.logging=true;//Gettheusernameandstoreittoprependtomessages.//Setinitialfocustomessageinputbox.//Starttheconnection.$.connection.hub.start().done(function(){
chat.server.getConnectionId().done(function(connectionId){
chatConnectionId=connectionId;
});
});//Createafunctionthatthehubcancallbacktodisplaymessages.chat.client.updateProgressbar=function(percent){//Addthemessagetothepage.if(parseInt(percent)<=100){
$.messager.progress(‘bar’).progressbar(‘setValue’,percent);
}//varvalue=$.messager.progress(‘bar’).progressbar(‘getValue’);};
}functionshowProgressbar(){
$.messager.progress({
title:’测试进度条’,
interval:0//每次进度更新之间以毫秒为单位的时间长度。默认值是300。});
}