C#使用SignalR实现进度条

标签：前端   signal   ogr   hat   white   new   ext   nts   spl   

1. 需求背景  产品觉得在后台处理数据时给前端加个进度条 
2. 项目框架 .ENT framework4.5 MVC 5.0
3. Nuget引入 Microsoft.Owin 系列 2.0.2 
4. Nuget引入 Microsoft.AspNet.SignalR 系列 2.0.3
5. 服务器代码 选择已安装 > Visual C# > Web > SignalR ，然后选择SignalR Hub 类 (v2)

   1. using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using XXX.WMS.Core.Log;
      using Microsoft.AspNet.SignalR;
      
      namespace XXX.WebUI
      {
          public class SaleBackHub : Hub
          {
              private void Send(string connectionId, string percent)
              {
                  // Call the addNewMessageToPage method to update clients.
                  try
                  {
                      Clients.Client(connectionId).updateProgressbar(percent);
                  }
                  catch (Exception ex)
                  {
                      LoggerManager.GetInstance().Fatal(ex);
                  }
              }
      
              public string GetConnectionId()
              {
                  return this.Context.ConnectionId;
              }
          }
      }

       

   2. 服务端调用前端action更新进度条

       1 //使用外部方式调用Hub类方法
       2 var saleBackHub = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<SaleBackHub>();
       3 var percent = 0;
       4 if (!string.IsNullOrWhiteSpace(requestDto.ProgressbarKey))
       5 {
       6 　　percent = (int)((decimal)++progressCount / (decimal)saleBackModelListCount * 100);
       7 try
       8 {
       9    //调用前端action 更新进度条
      10    saleBackHub.Clients.Client(requestDto.ProgressbarKey).updateProgressbar(percent.ToString());
      11 }
      12 catch (Exception ex)
      13 {
      14     throw;
      15 }
      16 }

       

6. 服务添加Starup.cs
   1. 　　

      using System;
      using System.Threading.Tasks;
      using Microsoft.Owin;
      using Owin;
      
      [assembly: OwinStartup(typeof(Frxs.WMS.Management.WebUI.Startup))]
      
      namespace xxx.WMS.Management.WebUI
      {
          public class Startup
          {
              public void Configuration(IAppBuilder app)
              {
                  // 有关如何配置应用程序的详细信息，请访问 https://go.microsoft.com/fwlink/?LinkID=316888
                  app.MapSignalR();
              }
          }
      }

       

7. 　前端代码

   1. 对应页面引入signalR.js

      <script src="@Url.Content("~/Scripts/signalR/jquery.signalR-2.0.3.min.js“)" type="text/javascript"></script>
      <script src="~/signalr/hubs"></script>

   2. 初始化signalR 连接 定义后端推送action  渲染进度条  本次用的是jeasyui 进度条弹窗

      var chat;
      var chatConnectionId;
      function initchatHub() {
          // Reference the auto-generated proxy for the hub.
          chat = $.connection.saleBackHub;
          $.connection.hub.logging = true;
          // Get the user name and store it to prepend to messages.
          // Set initial focus to message input box.
          // Start the connection.
          $.connection.hub.start().done(function () {
              chat.server.getConnectionId().done(function (connectionId) {
                  chatConnectionId = connectionId;
              });
          });
      
          // Create a function that the hub can call back to display messages.
          chat.client.updateProgressbar = function (percent) {
              // Add the message to the page.
              if (parseInt(percent) <= 100) {
                  $.messager.progress(‘bar‘).progressbar(‘setValue‘, percent);
              }
              //var value = $.messager.progress(‘bar‘).progressbar(‘getValue‘);
          };
      }
      
      function showProgressbar() {
          $.messager.progress({
              title: ‘测试进度条‘,
              interval: 0 //每次进度更新之间以毫秒为单位的时间长度。默认值是 300。 
          });
      }

8. 　　实际效果图

   1. 

9. 　　参考地址 https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/

   　　　　　　

C#使用SignalR实现进度条

标签：前端   signal   ogr   hat   white   new   ext   nts   spl   

原文地址：https://www.cnblogs.com/-bobi/p/11615411.html