.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.實現結果