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更新进度条
       //使用外部方式调用Hub类方法
      var saleBackHub = Microsoft.AspNet.SignalR.GlobalHost.ConnectionManager.GetHubContext<SaleBackHub>();
      var percent = ;
      if (!string.IsNullOrWhiteSpace(requestDto.ProgressbarKey))
      {
        percent = (int)((decimal)++progressCount / (decimal)saleBackModelListCount * );
      try
      {
      //调用前端action 更新进度条
      saleBackHub.Clients.Client(requestDto.ProgressbarKey).updateProgressbar(percent.ToString());
      }
      catch (Exception ex)
      {
      throw;
      }
      }
  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.   实际效果图

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

          

C#使用SignalR实现进度条的更多相关文章

  1. .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能

    .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...

  2. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  3. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  4. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  5. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  6. WPF自定义控件第一 - 进度条控件

    本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...

  7. python实现一个控制台下的进度条

    今天写练习爬虫感觉很需要个进度条,就随手用函数实现了一个,到了晚上突然感觉到这个东西应该单独写出来以后肯定用用得着. 代码也很简单,我就不细讲了,直接上代码了. 测试代码: instance.py i ...

  8. 【Win 10 应用开发】通过数据绑定更新进度条

    实现 INotifyPropertyChanged 接口可以在属性更改后通知数据的使用者,这个相信大伙儿都知道.于是,有朋友会问:对于要实时显示进度的情况,比如更新进度条,能用这个实现吗? 当然是可以 ...

  9. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

随机推荐

  1. unity_小功能实现(敌人巡逻功能)

    利用NavMeshAgent控制敌人巡逻,即敌人在一组位置间循环巡逻. 首先我们要知道NavMeshAgent中有两个方法:1.锁定当前巡逻的某一目标位置,即navMeshAgent.destinat ...

  2. 命令行通过入参调用jar包

    命令行通过入参调用jar包 最近因为项目需要,需要实现一个功能,即定时执行服务器上的一个脚本去对数据库的数据进行业务处理,要操作的数据库有很多种,mysql.db2.oracle.sqlserver等 ...

  3. Fiddle用于移动端抓包

    一.什么情况下可以用到 1.调查参考其他移动端网站的抓包,他们传输方式.如微信上京东的智能机器人的包.移动端的请求接口格式.如何实现的效果等. 2.调试本地移动端页面的测试页面效果是否有问题.如:页面 ...

  4. A - 猜数字

    http://acm.hdu.edu.cn/showproblem.php?pid=1172 猜数字 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家 ...

  5. jQuery的大小拖动

    原来一直没有拖动放大的效果,居然只是没有jquery-ui.css的样式文件,虽然这是一个很小的部分,但是防微杜渐.程序本来就是个不容有小错误的存在. 如果没有样式文件,那么可以收缩的三角形就不会出现 ...

  6. 007 Python程序语法元素分析

    目录 一.概述 二.程序的格式框架 2.1 代码高亮 2.2 缩进 2.3 注释 2.4 缩进.注释 三.命名与保留字 3.1 变量 3.2 命名 3.3 保留字 3.4 变量.命名.保留字 四.数据 ...

  7. Android集成JPush极光推送

    推送原理 参考网址:https://blog.csdn.net/huangli1466384630/article/details/79889473 SDK下载 https://docs.jiguan ...

  8. 史上最详 Thymeleaf 使用教程

    前言 操作前建议先参考我的另一篇博客:玩转 SpringBoot 2 快速整合 | Thymeleaf 篇 查看如何在SpringBoot 中使用 Thymeleaf.还有一点需要注意的是:模版页面中 ...

  9. 高级部分_委托、Lambda表达式、事件

    委托 (1)把方法当作参数来传递的话,就要用到委托: (2)委托是一个类型,这个类型可以赋值一个方法的引用. C#使用一个类分为两个阶段,首先定义这个类,告诉编译器这个类由什么字段和方法组成:然后使用 ...

  10. 搜索入门练习题9 LETTERS 题解

    题目出处:<信息学奥赛一本通>第五章上机练习1 或者 POJ1154 题目描述 给出一个 \(R\times S\) 的大写字母矩阵,一开始你所处的位置在左上角,你可以向上下左右四个方向移 ...