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. 设置ABP默认使用中文

    ABP提供的启动模板, 默认使用是英文: 虽然可以通过右上角的菜单切换成中文, 但是对于国内项目来说, 默认使用中文是很正常的需求. 本文介绍了如何实现默认语言的几种方法, 希望能对ABP爱好者有所帮 ...

  2. SpringMVC中的generator

    引言 今天在做一个原生的spring项目的时候碰到一个非常好用的代码自动生成器,叫做generator,主要是运用于mybatis中的代码生成,它可以生成mapper的映射xml,model中的实体类 ...

  3. LeetCode 笔记

    Valid Sudoku 数独整体能够满足的情况是比较复杂.参考:编程之美 关于数独问题的讨论 这道题的解法可能简单一点,因为对输入进行来限制.只是去判断是否是一个数独数独的形式相比较来说也是较简单的 ...

  4. [python]标准比较运算符

    1. python的标准比较运算符,根据表达式的值的真假返回布尔值. 比较运算符: <   <=   >   >=   ==   !=   <> >>& ...

  5. HDU-3038How Many Answers Are Wrong权值并查集

    How Many Answers Are Wrong 题意:输入一连串的区间和,问和前面的矛盾个数: 思路:我在做专题,知道是并查集,可是还是不知道怎么做,学了一下权值并查集和大佬的优秀思路,感觉回了 ...

  6. 树状数组求区间和模板 区间可修改 参考题目:牛客小白月赛 I 区间

    从前有个东西叫树状数组,它可以轻易实现一些简单的序列操作,比如单点修改,区间求和;区间修改,单点求值等. 但是我们经常需要更高级的操作,比如区间修改区间查询.这时候树状数组就不起作用了,只能选择写一个 ...

  7. 用.NET写“算命”程序

    用.NET写"算命"程序 "算命",是一种迷信,我父亲那一辈却执迷不悟,有时深陷其中,有时为求一"上上签",甚至不惜重金,向"天神 ...

  8. Java IO写文件效率

    写入方法: /** *1 按字节写入 FileOutputStream * * @param count 写入循环次数 * @param str 写入字符串 */ public void output ...

  9. 单点登录(两种单点登录类型:SSO/CAS、相同一级域名的SSO)

    单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...

  10. webview与webApp页面交互传参

    参考网址:https://blog.csdn.net/books1958/article/details/44747045 上一篇说了Android集成极光推送获取了RegistrationId推送标 ...