.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 = "";
            }
            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.我项目中最后实现的实时显示进度条进度和相关代码：

  var chat = $.connection.chatHub;
         chat.client.addNewMessageToPage = function (name, rate) {
             if (rate != "100" || rate != 100) {
                 $('#p').progressbar('setValue', parseInt(rate));
                 $("#ppp").text("正在导入--" + name);
             }
         };
         $.connection.hub.start().done(function () { });

         $("#btnSave").click(function () {
             if (filenamelist == "" || filenamelist == null) {
                 return;
             }
             else {
                 $.ajax({
                     url: "/Import/ImportSingleFiles?allfilename=" + escape(filenamelist),
                     dataType: "json",
                     type: "post",
                     success: function (data) {

                         if (data.result == true) {
                             parent.layer.msg("全部导入成功！");

                             $('#p').progressbar('setValue', parseInt(100));

                         }
                         else {
                             parent.layer.msg("导入出错！请从新选择文件！");
                             $("#ppp").text("导入出错！请从新选择文件！");
                             $("#ppp").css("color", "red");
                             $("#tip").hide();
                             alert(data.message);

                             $("#btnBack").show();
                         }
                     }
                 })
             }
         });

6.实现结果