为ASP.NET页面提供统一的提交等待对话框

在一个基于ASP.NET Web Form技术的网页中,当我们点击一个按钮的时候,它会使用Postback机制来向服务器发送请求,在某些情况下(譬如网速过慢,服务器响应时间过长),页面可能不会马上刷新,这是时候用户就有可能回去重复点击按钮或者进行其他操作,从而导致一些错误。

于是我们想到,可以在点击按钮之后,用一个遮罩来覆盖全页面,籍此来防止误操作,同时显示一个等待对话框告知用户耐心等待。在ASP.NET页面中,想要实现这样的效果是少不了要用到JavaScript的。

我们先来写一个基于jQuery的对话框弹出函数:

var loadingDialog = $('<div title=""><p class="center"><img src="/_layouts/images/bsl/loading.gif"/></p><br/><p class="center">Please wait for a little while.</p></div>');
function bsl_showLoadingDialog(title) {
loadingDialog.dialog({
modal: true,
title: title,
width: 200,
height: 100,
closeOnEscape: false,
resizable: false
});
loadingDialog.parent().find('.ui-dialog-titlebar-close').hide();
}

然后把这个函数加到所有页面中所有会引发Postback的按钮的OnClientClick属性上。

嗯。

我是开玩笑的。

且不论有些按钮上本来就已经设置了OnClientClick属性,光是这些按钮的数量,就让这种修改显得不现实。

所以我们最好还是能够统一把页面中的Postback事件接管过来,参考我之前写过的一篇《在ASP.NET页面中使用jQuery来处理表单submit事件》,可以轻松的写出下面的代码来在Postback过程中做一些其他事情。

$(document).ready(function () {
if (typeof __doPostBack == 'function') {
var old__doPostBack = __doPostBack;
__doPostBack = function (t, a) {
old__doPostBack(t, a);
if (typeof Page_IsValid == 'undefined' || Page_IsValid)
bsl_showLoadingDialog('Processing...');
}
}
});

在上面的代码中,我们将页面中的Postback函数替换为一个自定义函数,然后在其内部执行原来的postback函数,接着判断Page_IsValid变量是否存在或是否为true,ASP.NET的验证机制会将页面的整体验证结果保存在这个变量中,当页面不需要验证时,它自然就是undefined状态,我们应当在页面不需要验证,或者验证结果为true的情况下才弹出等待对话框。
那么可能会有人会疑惑,为什么要在Postback执行之后才弹出对话框,而不是之前?的确,先弹出对话框,再进行Postback是非常正常的思路,之所以要这么做,是因为兼容IE的一个小毛病。IE在向服务器端提交数据时,会停止播放GIF图片的动画效果,而我们的等待对话框少不了动态GIF图片,解决之道就是在提交之后马上将GIF图插入到DOM里。

发表评论

电子邮件地址不会被公开。 必填项已用*标注