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= ...
随机推荐
- 设置ABP默认使用中文
ABP提供的启动模板, 默认使用是英文: 虽然可以通过右上角的菜单切换成中文, 但是对于国内项目来说, 默认使用中文是很正常的需求. 本文介绍了如何实现默认语言的几种方法, 希望能对ABP爱好者有所帮 ...
- SpringMVC中的generator
引言 今天在做一个原生的spring项目的时候碰到一个非常好用的代码自动生成器,叫做generator,主要是运用于mybatis中的代码生成,它可以生成mapper的映射xml,model中的实体类 ...
- LeetCode 笔记
Valid Sudoku 数独整体能够满足的情况是比较复杂.参考:编程之美 关于数独问题的讨论 这道题的解法可能简单一点,因为对输入进行来限制.只是去判断是否是一个数独数独的形式相比较来说也是较简单的 ...
- [python]标准比较运算符
1. python的标准比较运算符,根据表达式的值的真假返回布尔值. 比较运算符: < <= > >= == != <> >>& ...
- HDU-3038How Many Answers Are Wrong权值并查集
How Many Answers Are Wrong 题意:输入一连串的区间和,问和前面的矛盾个数: 思路:我在做专题,知道是并查集,可是还是不知道怎么做,学了一下权值并查集和大佬的优秀思路,感觉回了 ...
- 树状数组求区间和模板 区间可修改 参考题目:牛客小白月赛 I 区间
从前有个东西叫树状数组,它可以轻易实现一些简单的序列操作,比如单点修改,区间求和;区间修改,单点求值等. 但是我们经常需要更高级的操作,比如区间修改区间查询.这时候树状数组就不起作用了,只能选择写一个 ...
- 用.NET写“算命”程序
用.NET写"算命"程序 "算命",是一种迷信,我父亲那一辈却执迷不悟,有时深陷其中,有时为求一"上上签",甚至不惜重金,向"天神 ...
- Java IO写文件效率
写入方法: /** *1 按字节写入 FileOutputStream * * @param count 写入循环次数 * @param str 写入字符串 */ public void output ...
- 单点登录(两种单点登录类型:SSO/CAS、相同一级域名的SSO)
单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...
- webview与webApp页面交互传参
参考网址:https://blog.csdn.net/books1958/article/details/44747045 上一篇说了Android集成极光推送获取了RegistrationId推送标 ...