ASP.NET服务器端事件利用MARQUEE实现正在处理效果

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言：ASP.NET同仁们应该都遇到过当触发一个比较耗时的服务器端事件时，页面会处在一个等待的状态（即假死状态），用户体验非常不好，很容易造成用户二次点击，造成重复提交。至于解决方案自然是有的（问google）。这里介绍一个本人使用的一个小伎俩，如题。

1、首先看一下效果

2、介绍一下思路：弹出一个遮罩层遮住当前页面，在层上显示正在处理效果，就是这么的简单。

3、如何实现

我们知道ASP.NET服务器端控件有一个事件OnClientClick，至于该事件的用法就不多言了。说道这里，估计大家都知道是怎么回事了，没错，就是JS，使用JS创造出遮罩层及效果，然后让服务器端事件执行去吧，执行完只要一PostBack，页面从新呈现。

4、要点分析

1．如何创建遮罩层，在此不多讲，因为我用的是现成的。这里给大家推荐一款非常棒的jquery前端插件库EasyUI，真的非常优秀，大家赶紧去google吧！

2．至于“正在处理。。。”的效果，最初我是用了一个动态图片。可是不理想，因为页面假死状态下，动态图片也假死；后来就发现了marquee，虽然样式差了点，但总算可以动态了。

5、核心代码

生成效果方法

 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

6、如何使用

只要在Button或LinkButton控件上加上OnClientClick ="window.setTimeout('Processing(\'数据处理中...\')', 10);"即可

注：为什么要用window.setTimeout ? 答：因为火狐浏览器。

此处求助♥：这种方式OnClientClick ="Processing(\'数据处理中...\');"下为什么火狐浏览器不触发（IE下可是好好的），而使用window.setTimeout后就可以了？？？

7、统一使用

统一使用即只要是可以造成表单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插件作为弹出层，其实完全可以自己写的。