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插件做为弹出层，其实彻底能够本身写的。