C#使用SignalR实现进度条
- 需求背景 产品觉得在后台处理数据时给前端加个进度条
- 项目框架 .ENT framework4.5 MVC 5.0
- Nuget引入 Microsoft.Owin 系列 2.0.2
- Nuget引入 Microsoft.AspNet.SignalR 系列 2.0.3
- 服务器代码 选择已安装 > Visual C# > Web > SignalR ,然后选择SignalR Hub 类 (v2)
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;
}
}
}- 服务端调用前端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;
}
}
- 服务添加Starup.cs
-
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();
}
}
}
-
前端代码
对应页面引入signalR.js
<script src="@Url.Content("~/Scripts/signalR/jquery.signalR-2.0.3.min.js“)" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>初始化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。
});
}
实际效果图
参考地址 https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/
C#使用SignalR实现进度条的更多相关文章
- .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...
- Android -- 真正的 高仿微信 打开网页的进度条效果
(本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...
- WPF自定义控件第一 - 进度条控件
本文主要针对WPF新手,高手可以直接忽略,更希望高手们能给出一些更好的实现思路. 前期一个小任务需要实现一个类似含步骤进度条的控件.虽然对于XAML的了解还不是足够深入,还是摸索着做了一个.这篇文章介 ...
- python实现一个控制台下的进度条
今天写练习爬虫感觉很需要个进度条,就随手用函数实现了一个,到了晚上突然感觉到这个东西应该单独写出来以后肯定用用得着. 代码也很简单,我就不细讲了,直接上代码了. 测试代码: instance.py i ...
- 【Win 10 应用开发】通过数据绑定更新进度条
实现 INotifyPropertyChanged 接口可以在属性更改后通知数据的使用者,这个相信大伙儿都知道.于是,有朋友会问:对于要实时显示进度的情况,比如更新进度条,能用这个实现吗? 当然是可以 ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
随机推荐
- unity_小功能实现(敌人巡逻功能)
利用NavMeshAgent控制敌人巡逻,即敌人在一组位置间循环巡逻. 首先我们要知道NavMeshAgent中有两个方法:1.锁定当前巡逻的某一目标位置,即navMeshAgent.destinat ...
- 命令行通过入参调用jar包
命令行通过入参调用jar包 最近因为项目需要,需要实现一个功能,即定时执行服务器上的一个脚本去对数据库的数据进行业务处理,要操作的数据库有很多种,mysql.db2.oracle.sqlserver等 ...
- Fiddle用于移动端抓包
一.什么情况下可以用到 1.调查参考其他移动端网站的抓包,他们传输方式.如微信上京东的智能机器人的包.移动端的请求接口格式.如何实现的效果等. 2.调试本地移动端页面的测试页面效果是否有问题.如:页面 ...
- A - 猜数字
http://acm.hdu.edu.cn/showproblem.php?pid=1172 猜数字 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家 ...
- jQuery的大小拖动
原来一直没有拖动放大的效果,居然只是没有jquery-ui.css的样式文件,虽然这是一个很小的部分,但是防微杜渐.程序本来就是个不容有小错误的存在. 如果没有样式文件,那么可以收缩的三角形就不会出现 ...
- 007 Python程序语法元素分析
目录 一.概述 二.程序的格式框架 2.1 代码高亮 2.2 缩进 2.3 注释 2.4 缩进.注释 三.命名与保留字 3.1 变量 3.2 命名 3.3 保留字 3.4 变量.命名.保留字 四.数据 ...
- Android集成JPush极光推送
推送原理 参考网址:https://blog.csdn.net/huangli1466384630/article/details/79889473 SDK下载 https://docs.jiguan ...
- 史上最详 Thymeleaf 使用教程
前言 操作前建议先参考我的另一篇博客:玩转 SpringBoot 2 快速整合 | Thymeleaf 篇 查看如何在SpringBoot 中使用 Thymeleaf.还有一点需要注意的是:模版页面中 ...
- 高级部分_委托、Lambda表达式、事件
委托 (1)把方法当作参数来传递的话,就要用到委托: (2)委托是一个类型,这个类型可以赋值一个方法的引用. C#使用一个类分为两个阶段,首先定义这个类,告诉编译器这个类由什么字段和方法组成:然后使用 ...
- 搜索入门练习题9 LETTERS 题解
题目出处:<信息学奥赛一本通>第五章上机练习1 或者 POJ1154 题目描述 给出一个 \(R\times S\) 的大写字母矩阵,一开始你所处的位置在左上角,你可以向上下左右四个方向移 ...