众所周知,ScriptManager是ASP.NET的的一个核心控件,如果一个页面用到了AJAX Extentions控件的话,那么该页面上必须有ScriptManager控件。当页面上出现了异常时,它不会再像普通的2.0的页面那样显示出红黄页(在没有进行任何处理的情况下),而是以alert的方式弹出对话框,告知用户出现了异常。这种弹出对话框的方式一般来说应该也是可以令人接受的,不过,若想得到更高级的用户体验的话,可能就需要我们自己手动再写一些代码了。比如说出现像网易邮箱中当你要清空垃圾邮件箱时的对话框效果,需要我们自己手动再写一些代码来实现。
在html页面上放置一个隐藏的层,该层用来显示我们的异常信息。
1 <div id="errorMessage" style="LEFT: -30px; POSITION: relative; TOP: -257px; visibility:hidden">
2 2 <div class="title">
3 3 操作提示
4 4 </div>
5 5 <div class="alertTxt">
6 6 <span id="errorMessageLabel" runat="server"></span>
7 7 </div>
8 8 <div>
9 9 <input id="Button1" class="btn" type="button" value="OK" onclick="javascript :onOK();" />
1010 </div>
1111 </div>
1212 </center>
2 2 <div class="title">
3 3 操作提示
4 4 </div>
5 5 <div class="alertTxt">
6 6 <span id="errorMessageLabel" runat="server"></span>
7 7 </div>
8 8 <div>
9 9 <input id="Button1" class="btn" type="button" value="OK" onclick="javascript :onOK();" />
1010 </div>
1111 </div>
1212 </center>
然后,我们就可以利用此层,以及ASP.NET AJAX框架下的JS的pageLoad事件中写关于异常处理的事件了。
1
2<script language="javascript" type="text/javascript">
3 function pageLoad()
4 {
5 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
6 }
7 function onEndRequest(sender, e)
8 {
9 // 异常发生时将对话框显示给用户
10 if(e.get_error())
11 {
12 // 显示自定义对话框
13 $get("errorMessage").style.display = "block";
15 $get("errorMessageLabel").innerHTML ="出错了,请重试!<br>" + e.get_error().description;
16 // 通知PageRequestManager异常已经处理过
17 e.set_errorHandled(true);
18 }
19 }
20 function onOK()
21 {
22 $get("errorMessage").style.display = "none";
23 }
24</script>
2<script language="javascript" type="text/javascript">
3 function pageLoad()
4 {
5 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
6 }
7 function onEndRequest(sender, e)
8 {
9 // 异常发生时将对话框显示给用户
10 if(e.get_error())
11 {
12 // 显示自定义对话框
13 $get("errorMessage").style.display = "block";
15 $get("errorMessageLabel").innerHTML ="出错了,请重试!<br>" + e.get_error().description;
16 // 通知PageRequestManager异常已经处理过
17 e.set_errorHandled(true);
18 }
19 }
20 function onOK()
21 {
22 $get("errorMessage").style.display = "none";
23 }
24</script>
通过以上简单的代码,一个有着良好的用户体验的对话框就完成了。细细想想,这或许可以做为整个网站上所有页面上的公有js文件,将它嵌套到页面中,则每个页面的异常都会以一个良好体验的对话框显示给用户。帅!