前言
最近因為工作中遇到一個需求，需要做了一個批量導入功能，但長時間運行沒個反饋狀態，很容易讓人看了心急，產生各種臆想！為了解決心裡障礙，寫了這麼個功能。
通過線程執行導入，並把正在執行的狀態存入session，既共享執行狀態，通過ajax調用session裡的執行狀態，從而實現反饋導入狀態的功能！
上代碼： 前端頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>批量導入數據</title>
<style type="text/css">
.pop_body_con { width: 310px; position: fixed; top: 50%; left: 50%; margin-left: -150px; background: #eee; display:none; }
.pop_body_con .pop_head { width: auto; padding: 10px 0; background: #fff; }
.pop_body_con .pop_head a { display: block; color: #717274; font-size: 12px; text-decoration: none; text-align: center; }
.pop_box { width: auto; overflow: hidden; padding: 45px 10px; }
.pop_box .pop_text { float: left; }
.pop_box .pop_text p { padding: 0; margin: 0; font-size: 12px; line-height: 18px; color: #717274;}
.pop_box .progress_bar_con { float: left; width: 220px; position: relative; z-index: 2; }
.pop_box .progress_bar_con p { margin: 0; padding: 0; font-size: 12px; color: #fff; line-height: 18px; width: 100%;
text-align: center; position: absolute; left: 0; top: 0; z-index: 4; }
.pop_box .progress_bar_con .progress_bar_start { width: 100%; height: 18px; background: #C4C0C0; }
.pop_box .progress_bar_con .progress_bar_end { width: 16%; height: 18px; background: #2bd35d; position: absolute; left: 0; top: 0; z-index: 3; }
.pop_box .progress_bar_con { float: left; }
#loading-mask { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 0; background-color: rgba(0, 0, 0, 0.34902); display: none; }
</style>
<script src="ajax-master/jquery.js"></script>
<script>
var MyInterval;
$(function () {
$("#startImport").click(function () {
MyInterval = setInterval(getState, 1000);
});
});
function getState() {
$.ajax({
url: "test.aspx",
type: "Post",
data: { action: "getSession" },
success: function (msg) {
if (msg != "null") {
msg = eval('(' + msg + ')');
if (msg.being == 100) {
setProcessBar(1, 1);
$(".pop_body_con").hide();
$("#loading-mask").hide();
clearInterval(MyInterval);
}
else {
$(".pop_body_con").show();
$("#loading-mask").show();
setProcessBar(msg.being, msg.count)
}
}
}
});
}
function setProcessBar(exeFlag, exeMax) {
$("#progressbar_text").html(parseInt(roundFun(exeFlag / exeMax, 2) * 100) + "%");
$("#progressbar_bar").attr("style", "width:" + parseInt(roundFun(exeFlag / exeMax, 2) * 100) + "%;");
}
function roundFun(number, X) {
X = (!X ? 2 : X);
return Math.round(number * Math.pow(10, X)) / Math.pow(10, X);
}
</script>
</head>
<body >
<input id="startImport" type="button" value="導入數據" />
<div id="loading-mask" ></div>
<div class="pop_body_con">
<div class="pop_head">
<a href="javascript:;">正在導入…請勿操作！</a>
</div>
<div class="pop_box">
<div class="pop_text">
<p>導入進度：</p>
</div>
<div class="progress_bar_con">
<p id="progressbar_text">0%</p>
<div class="progress_bar_start"></div>
<div class="progress_bar_end" id="progressbar_bar"></div>
</div>
</div>
</div>
</body>
</html>
後台頁面：
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.Form["action"];
if (!string.IsNullOrEmpty(action))
{
Hashtable temp = tmethod();
if (temp == null)
{
Thread trd = new Thread(new ParameterizedThreadStart(insertData));
trd.Start(action);
}
else
{
if (temp["reCode"].ToString() == "100")
{
Session.Remove("process");
}
}
JavaScriptSerializer ser = new JavaScriptSerializer();
String jsonStr = ser.Serialize(temp);
Response.Write(jsonStr);
Response.End();
}
}
public Hashtable tmethod()
{
return (Hashtable)Session["process"];
}
private void insertData(object obj)
{
string action = obj.ToString();
int tCount = 100;
for (int i = 0; i < tCount; i++)
{
Hashtable stateHash = setStateVal(0, i, tCount, action);
Session["process"] = stateHash; //存入session，方便共享執行狀態
Thread.Sleep(500);
}
Session["process"] = setStateVal(100, tCount, tCount, action);
Thread.CurrentThread.Abort();
}
private Hashtable setStateVal(int code, int beingV, int CountV, string action)
{
Hashtable stateHash = new Hashtable();
stateHash["reCode"] = code; //返回狀態值
stateHash["being"] = beingV; //正在執行值
stateHash["count"] = CountV; //總值
stateHash["action"] = action; //總值
return stateHash;
}
}
ok，共享完畢！
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
