ASP.NET服務器端事件利用MARQUEE實現正在處理效果

前言：ASP.NET同仁們應該都遇到過當觸發一個比較耗時的服務器端事件時，頁面會處在一個等待的狀態（即假死狀態），用戶體驗很是很差，很容易形成用戶二次點擊，形成重複提交。至於解決方案天然是有的（問google）。這裏介紹一個本人使用的一個小伎倆，如題。

一、首先看一下效果

 

二、介紹一下思路：彈出一個遮罩層遮住當前頁面，在層上顯示正在處理效果，就是這麼的簡單。

三、如何實現

咱們知道ASP.NET服務器端控件有一個事件OnClientClick，至於該事件的用法就很少言了。說道這裏，估計你們都知道是怎麼回事了，沒錯，就是JS，使用JS創造出遮罩層及效果，而後讓服務器端事件執行去吧，執行完只要一PostBack，頁面重新呈現。

四、要點分析

1．如何建立遮罩層，在此很少講，由於我用的是現成的。這裏給你們推薦一款很是棒的jquery前端插件庫EasyUI，真的很是優秀，你們趕忙去google吧！

2．至於「正在處理。。。」的效果，最初我是用了一個動態圖片。但是不理想，由於頁面假死狀態下，動態圖片也假死；後來就發現了marquee，雖然樣式差了點，但總算能夠動態了。

五、核心代碼

生成效果方法

 1 function Processing(msg) {
 2     var sss = '<table style="border:none; border-spacing:0; border-collapse:collapse; width:100%; height:100%;">' +
 3                 '<tr><td style="text-align:center; vertical-align:middle; border:none;">' +
 4                 '<font style="color:#FF9900;">' + msg + '</font><br />' +
 5                 '<marquee style="width:150px;height:16px;border:solid 1px #95b8e7;" direction="right" scrollDelay="60">' +
 6                 '<div style="width:100px;background-color:#0000E0;height:16px;">&nbsp;</div>' +
 7                 '</marquee>' +
 8                 '</td></tr></table>';
 9     try {
10         if (typeof using == "undefined" || typeof using != "function") {
11             //alert("缺乏easyloader.js引用?");
12         }
13         else {
14             using('window', function () {
15                 var $Pro = $("<div id='Processing'>").attr("style", "width: 200px; height: 80px; padding: 10px;border:1px solid #95b8e7;text-align:center; vertical-align:middle;");
16                 $Pro.append(sss);
17                 $Pro.appendTo("form");
18                 $Pro.window({ title: '', modal: true });
19             });
20         }
21     }
22     catch (e) { }
23 }
24 function DestroyProcessing() {
25     try {
26         using('window', function () {
27             $("#Processing").window("close");
28             $("#Processing").remove();
29         });
30     }
31     catch (e) { }
32 }

 

提示：不要忘了在頁面引用腳本庫jquery及easyloader

六、如何使用

只要在Button或LinkButton控件上加上OnClientClick ="window.setTimeout('Processing(\'數據處理中...\')', 10);"便可

注：爲何要用window.setTimeout ? 答：由於火狐瀏覽器。

此處求助♥：這種方式OnClientClick ="Processing(\'數據處理中...\');"下爲何火狐瀏覽器不觸發（IE下但是好好的），而使用window.setTimeout後就能夠了？？？

七、統一使用

統一使用即只要是能夠形成表單Submit的Button都會出現此效果。

用法：使用jquery給表單的Submit事件再綁定一個方法

1  $().ready(function () {
2             $("#form1").bind("submit", function () { window.setTimeout("Processing('數據處理中...');", 10); });
3         });

 

注意：LinkButton仍需單獨使用。至於爲何LinkButton不會形成表單的Submit，在此求解！

總結：其實目的就是解決在服務器響應時間過長時如何給用戶以友好的提示，同時防止用戶重複點擊出現的重複提交。遮罩層屏蔽了表單，防止了用戶重複點擊，指示條向用戶以示友好。再說一下marquee，在不使用ajax的狀況下，頁面響應期間，目前只發現只有marquee能夠保持動態。最後說明，由於本人在項目中大量使用了easyui插件，因此此處使用了easyui的window插件做爲彈出層，其實徹底能夠本身寫的。