众所周知,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();
"
/>
10
10
</
div
>
11
11
</
div
>
12
12
</
center
>
![None.gif](/Images/OutliningIndicators/None.gif)
2
![None.gif](/Images/OutliningIndicators/None.gif)
3
![None.gif](/Images/OutliningIndicators/None.gif)
4
![None.gif](/Images/OutliningIndicators/None.gif)
5
![None.gif](/Images/OutliningIndicators/None.gif)
6
![None.gif](/Images/OutliningIndicators/None.gif)
7
![None.gif](/Images/OutliningIndicators/None.gif)
8
![None.gif](/Images/OutliningIndicators/None.gif)
9
![None.gif](/Images/OutliningIndicators/None.gif)
10
![None.gif](/Images/OutliningIndicators/None.gif)
11
![None.gif](/Images/OutliningIndicators/None.gif)
12
![None.gif](/Images/OutliningIndicators/None.gif)
然后,我们就可以利用此层,以及ASP.NET AJAX框架下的JS的pageLoad事件中写关于异常处理的事件了。
1
2
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
3
function
pageLoad()
4![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
5
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);
6
}
7
function
onEndRequest(sender, e)
8![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
9
// 异常发生时将对话框显示给用户
10
if(e.get_error())
11![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
22
$get("errorMessage").style.display = "none";
23
}
24
</
script
>
![None.gif](/Images/OutliningIndicators/None.gif)
2
![None.gif](/Images/OutliningIndicators/None.gif)
3
![None.gif](/Images/OutliningIndicators/None.gif)
4
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
5
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
6
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
7
![None.gif](/Images/OutliningIndicators/None.gif)
8
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
9
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
10
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
11
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](/Images/dot.gif)
12
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
13
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
15
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
16
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
17
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
18
![ExpandedSubBlockEnd.gif](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
19
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
20
![None.gif](/Images/OutliningIndicators/None.gif)
21
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](/Images/dot.gif)
22
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
23
![ExpandedBlockEnd.gif](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
24
![None.gif](/Images/OutliningIndicators/None.gif)
通过以上简单的代码,一个有着良好的用户体验的对话框就完成了。细细想想,这或许可以做为整个网站上所有页面上的公有js文件,将它嵌套到页面中,则每个页面的异常都会以一个良好体验的对话框显示给用户。帅!