.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能
我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度,进度条实现动态在走。
网上看了很多实现此需求的方法(服务器轮训向客户端发送消息)ajax、webscoket、singal等。
之前的代码是前段用定时器ajax去访问后台的进度数据。然后给进度条赋值。发现有时候ajax请求总出现pending的状态。
之前的缓存实现代码:
var cc=true;
window.setTimeout(function () {
$.ajax({
url: "/Import/GetImportRate",
dataType: "json",
type: "post",
async: true,
success: function (data) {
if (data == null || data.rate == null) {
}
else if (data.rate != "100" || data.rate != 100) {
$('#p').progressbar('setValue', parseInt(data.rate));
$("#ppp").text("正在导入--" + data.currentname);
}
else {
}
}
});
if (cc) {
setTimeout(arguments.callee, 2000);
}
}, 2000);
public JsonResult GetImportRate(){var rate = HttpRuntime.Cache.Get("Progress");var cutname = HttpRuntime.Cache.Get("CurrentName");if (rate == null){rate = "0";}if (cutname == null){cutname = "";}return Json(new{rate = rate,currentname = cutname,});}
将数据保存在Cache中,每次ajax获取数据。
下面使用singal:
1.首先需要在setup中注册singalr
2.创建一个Hubs文件夹,其中创建ChatHub类,继承Hub
using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat {public class ChatHub : Hub{public void Send(string name, string message){ Clients.All.addNewMessageToPage(name, message);}} }
3.前段代码:
在需要用到的页面引用js
<script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
然后js代码
$(function () {var chat = $.connection.chatHub; chat.client.addNewMessageToPage = function (name, message) {//此方法对应着ChatHub类中的send方法,在此处理服务器 //传到客户端的信息。 }; $.connection.hub.start().done(function () { });});
4.在其他的Controller中使用Send方法去实现服务器消息传到客户端。
var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.addNewMessageToPage(name, message);
5.我项目中最后实现的实时显示进度条进度和相关代码:
1 var chat = $.connection.chatHub; 2 chat.client.addNewMessageToPage = function (name, rate) { 3 if (rate != "100" || rate != 100) { 4 $('#p').progressbar('setValue', parseInt(rate)); 5 $("#ppp").text("正在导入--" + name); 6 } 7 }; 8 $.connection.hub.start().done(function () { }); 9 10 11 $("#btnSave").click(function () { 12 if (filenamelist == "" || filenamelist == null) { 13 return; 14 } 15 else { 16 $.ajax({ 17 url: "/Import/ImportSingleFiles?allfilename=" + escape(filenamelist), 18 dataType: "json", 19 type: "post", 20 success: function (data) { 21 22 if (data.result == true) { 23 parent.layer.msg("全部导入成功!"); 24 25 $('#p').progressbar('setValue', parseInt(100)); 26 27 } 28 else { 29 parent.layer.msg("导入出错!请从新选择文件!"); 30 $("#ppp").text("导入出错!请从新选择文件!"); 31 $("#ppp").css("color", "red"); 32 $("#tip").hide(); 33 alert(data.message); 34 35 $("#btnBack").show(); 36 } 37 } 38 }) 39 } 40 });
6.实现结果
转载于:https://www.cnblogs.com/melodygkx/p/11498489.html
.Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能相关推荐
- android qq语音按钮,科技教程:如何在手机QQ中使用新版QQ语音进度条功能?
如今越来越多的小伙伴对于如何在手机QQ中使用新版QQ语音进度条功能?这方面的问题开始感兴趣,看似平静的每一天,在每个人身上都在发生着各种各样的故事,因为大家现在都是想要了解到此类的信息,那么既然现在大 ...
- ASP.NET MVC 学习6、学习使用Code First Migrations功能,把Model的更新同步到DB中
参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-new-field-to-th ...
- Android中通过SeekBar手动控制ProgressBar与模拟下载自动更新进度条
场景 进度条的常用场景: 通过SeekBar拖动进而更新ProgressBar进度条,比如调整音量效果等. 模拟下载实现自动更新进度条. 注: 博客: https://blog.csdn.net/ba ...
- pcmcia oracle vm vitualbox 虚拟机,virtualbox中调整虚拟机的硬盘大小 与 CentOS卡在进度条启动缓慢进不去解决办法...
由于经常需要在Linux虚拟机下测试一些环境,安装的东西比较多,导致之前分配给Linux虚拟机中的某个分区的空间不够用了,但是又不想重装系统,想直接给空间不足的那个分区调整空间.用的是Centos系统 ...
- java进度条_Java实现命令行中的进度条功能
前言 最近在写一个命令行中的下载工具,既然是下载文件用的,那么实时显示下载进度是非常有必要的.因此,就有了这里对进度条的实现尝试. 预览图 还是先预览下效果图吧. 这里是cmd里面的效果,总体看着还行 ...
- 敏捷开发中asp.net MVC的开发次序感受(先开发View?先开发Model?先开发Controller!)...
各种思路和顺序都试过. 最开始时先编写Model,毕竟Model是所有一切的基础,再说没有Model,Controller里边用到该怎么办. 后来改成先编写View,View才是用户能看到的东西啊,不 ...
- WinForm中 事件 委托 多线程的应用【以一个下载进度条为例】
第一步:首先我们创建一个winfor的项目 第二步:我们建一个窗体 在一个窗体里面 打开一个另外的窗体 另外的窗体有一个按钮 点击后就开始下载 下载完成后 在注册窗体上面 显示下载完成(达到在一个窗体 ...
- python中莱布尼茨计算圆周率_python圆周率盘算(带进度条)
一.要求: 1.盘算到圆周率后面越多位越好. 2.用进度条显示盘算的进度. 3.要求给出圆周率Π的详细盘算方法和注释. 二.算法: 1.拉马努金公式: 2.高斯-勒让德公式: 设置初始值: 频频执行以 ...
- 在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果 发布时间:2021-03-17 10:29:57 来源:亿速云 阅读:129 作者:小新 这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
最新文章
- 第二个冲刺期的第七天
- Python脚本完美解决Linux环境解压.zip文件乱码问题
- android应用兼容报告,手机资讯导报:华为发布国内首份Android7.0应用兼容报告
- 成功解决xlrd.biffh.XLRDError: Unsupported format, or corrupt file: Expected BOF record; found b‘Debug is
- 前端学习(3096):vue+element今日头条管理-回顾
- 计算Python运行时间
- 呼伦贝尔学院计算机宿舍,2020年呼伦贝尔学院新生宿舍环境条件,大一新生男生女生宿舍内部图片【多图】...
- Gesture APIs-Furthering Windows Mobile 6.5 Touch Gesture Framework
- Partition List -- LeetCode
- Atitit 数据融合merge功能v3新特性.docx
- python:DataFrame连续取前23列数据,或者连续取前2行数据,或者取某行某列数据
- diff 比较文件异同命令
- java 回调函数实现_Java实现的回调函数
- 安装前端插件 FeHelper
- 2021Android高级面试题总结,挥泪整理面经
- verilog学习笔记:简单的数据选择器modelsim仿真
- 大数据工程师、BI工程师、数据库工程师什么区别?
- 利用cesium模拟台风移动路径——以利奇马台风为例
- 解决TinyMCE富文本编辑器上传视频后在编辑区域内不能预览视频,被替换成img标签的问题
- 通达OA二次开发手册