您的位置：首页 > 编程语言 > ASP

自定义 ASP.NET UpdatePanel 控件的错误处理

2015-01-05 11:14 399 查看
http://msdn.microsoft.com/zh-cn/library/bb398934(v=vs.100).aspx

如果在 UpdatePanel 控件中更新部分页时发生错误，则默认行为是显示带有错误消息的浏览器消息框。本教程将向您演示如何自定义向用户显示错误的方式以及如何自定义错误消息。



先决条件

若要在您自己的开发环境中实现这些过程，您需要：

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer 速成版。

一个支持 AJAX 的 ASP.NET 网站。



在服务器代码中自定义错误处理

首先，您将通过使用页面中的服务器代码自定义错误处理。


在服务器代码中自定义错误处理

创建新页并切换到“设计”视图。

在工具箱的“AJAX Extensions”选项卡中，双击 ScriptManager 控件和 UpdatePanel 控件以将它们添加到页面中。



将以下控件添加到 UpdatePanel 控件中：

两个 TextBox 控件。

一个 Label 控件

一个 Button 控件。将该控件的 Text 属性设置为“计算”。

UpdatePanel 控件中的某些文本。



双击“计算”按钮，并为其事件处理程序添加下列代码：

C#

VB

protected void Button1_Click(object sender, EventArgs e)
{
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (Exception ex)
{
if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
{
ex.Data["ExtraInfo"] = " You can't divide " +
TextBox1.Text + " by " + TextBox2.Text + ".";
}
throw ex;
}
}


该代码包含一个 try-catch 语句。在 try 块中，该代码对在文本框中输入的值执行除法运算。如果该运算失败，则 catch 块中的代码会将 ExtraInfo 中的额外字符串信息添加到异常，然后不处理该异常而重新引发该异常。

切换到“设计”视图并选择 ScriptManager 控件。

在“属性”窗口的工具栏中，单击“事件”按钮，然后双击“AsyncPostBackError”框以创建该事件的处理程序。



将以下代码添加到 AsyncPostBackError 事件处理程序中：

C#

VB

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["ExtraInfo"] != null)
{
ScriptManager1.AsyncPostBackErrorMessage =
e.Exception.Message +
e.Exception.Data["ExtraInfo"].ToString();
}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}


该代码将检查是否已为该异常定义 ExtraInfo 数据项。如果已定义，则将 AsyncPostBackErrorMessage 属性设置为字符串值。否则，将创建一个默认错误消息。

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

向每个文本框中添加一个大于零的数，然后单击“计算”按钮以演示成功的回发。

将第二个文本框的值更改为 0，然后单击“计算”按钮以创建一个错误条件。

浏览器显示一个消息框，该消息框中包含在服务器代码中设置的消息。




说明：
消息框的具体样式取决于您所使用的浏览器，但是消息却都是相同的。
C#

VB

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (Exception ex)
{
if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
{
ex.Data["ExtraInfo"] = " You can't divide " +
TextBox1.Text + " by " + TextBox2.Text + ".";
}
throw ex;
}
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["ExtraInfo"] != null)
{
ScriptManager1.AsyncPostBackErrorMessage =
e.Exception.Message +
e.Exception.Data["ExtraInfo"].ToString();
}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Partial-Page Update Error Handling Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
/
<asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
=
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>




使用客户端脚本以自定义错误处理

前面的过程演示了如何通过设置 ScriptManager 控件的属性来自定义部分页呈现期间的错误。下面的过程通过使用客户端 PageRequestManager 类，来生成自定义项，以在<div> 元素中，而不是浏览器消息框中显示错误消息。


在客户端脚本中自定义错误处理

在前面创建的页面中，切换到“源”视图。

向该页面中添加以下标记：

C#

VB

<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons">
<input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
</div>
</div>
</div>


该标记包括一些元素，您可以使用这些元素显示部分页呈现错误。该标记定义了名称为 AlertDiv 的 <div> 元素，该元素中包含有他两个 <div> 元素。其中一个嵌套<div> 元素包含有一个 <input> 控件，用户可以利用该控件隐藏 <div> 元素。

在 <head> 元素中添加下列样式标记：

C#

VB

<style type="text/css">
#UpdatePanel1 {
width: 200px; height: 50px;
border: solid 1px gray;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute; right: 5%; bottom: 5%;
}
</style>


该样式可以使错误信息与其他页面内容相比显得更加显眼。

切换到“设计”视图，并验证您的页面是否与下列页面相似：



在“属性”窗口顶部的下拉列表中，选择 DOCUMENT 元素（它表示页面中的 <body> 元素），然后将该元素的 Id 属性设置为 bodytag。



切换到“源”视图。

将下列 <script> 块添加到 <asp:ScriptManager> 元素后的任意位置。

C#

VB

<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';

}
var adiv = $get(divElem);
adiv.style.visibility = visString;

}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage;
if (args.get_response().get_statusCode() == '200')
{
errorMessage = args.get_error().message;
}
else
{
// Error occurred somewhere other than the server page.
errorMessage = 'An unspecified error occurred. ';
}
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = errorMessage;
}
}
</script>


该脚本执行以下操作：

为 PageRequestManager 类的 endRequest 事件定义处理程序。在处理程序中，如果存在错误条件，则该代码显示 AlertDiv <div> 元素。

定义 ToggleAlertDiv 函数，该函数可隐藏或显示 AlertDiv 元素，并会根据错误条件更改页面的颜色。

定义 ClearErrorState 函数，该函数可隐藏错误消息 UI。

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

向每个文本框中添加一个大于零的数，然后单击“计算”按钮以演示成功的回发。

将第二个文本框的值更改为 0，然后单击“计算”按钮以演示错误条件。

将会显示自定义 AlertDiv 元素，而不是浏览器消息框。下图演示了一个错误条件的示例。



C#

VB

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)
{
try
{
int a = Int32.Parse(TextBox1.Text);
int b = Int32.Parse(TextBox2.Text);
int res = a / b;
Label1.Text = res.ToString();
}
catch (Exception ex)
{
if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
{
ex.Data["ExtraInfo"] = " You can't divide " +
TextBox1.Text + " by " + TextBox2.Text + ".";
}
throw ex;
}
}protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["ExtraInfo"] != null)
{
ScriptManager1.AsyncPostBackErrorMessage =
e.Exception.Message +
e.Exception.Data["ExtraInfo"].ToString();
}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>UpdatePanel Error Handling Example</title>
<style type="text/css">
#UpdatePanel1 {
width: 200px; height: 50px;
border: solid 1px gray;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute; right: 5%; bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';

}
var adiv = $get(divElem);
adiv.style.visibility = visString;

}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage;
if (args.get_response().get_statusCode() == '200')
{
errorMessage = args.get_error().message;
}
else
{
// Error occurred somewhere other than the server page.
errorMessage = 'An unspecified error occurred. ';
}
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = errorMessage;
}
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
/
<asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
=
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons">
<input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
</div>
</div>
</div>
</form>
</body>
</html>





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航