http://msdn.microsoft.com/zh-cn/library/bb398934(v=vs.100).aspx
如果在 UpdatePanel 控件中更新部分頁時發生錯誤,則默認行爲是顯示帶有錯誤消息的瀏覽器消息框。本教程將向您演示如何自定義向用戶顯示錯誤的方式以及如何自定義錯誤消息。
首先,您將通過使用頁面中的服務器代碼自定義錯誤處理。
在服務器代碼中自定義錯誤處理
-
創建新頁並切換到“設計”視圖。
-
在工具箱的“AJAX Extensions”選項卡中,雙擊 ScriptManager 控件和 UpdatePanel 控件以將它們添加到頁面中。
-
將以下控件添加到 UpdatePanel 控件中:
-
兩個 TextBox 控件。
-
一個 Label 控件
-
一個 Button 控件。將該控件的 Text 屬性設置爲“計算”。
-
UpdatePanel 控件中的某些文本。
-
-
雙擊“計算”按鈕,併爲其事件處理程序添加下列代碼:
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 事件處理程序中:
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,然後單擊“計算”按鈕以創建一個錯誤條件。
瀏覽器顯示一個消息框,該消息框中包含在服務器代碼中設置的消息。
說明: 消息框的具體樣式取決於您所使用的瀏覽器,但是消息卻都是相同的。
<%@ 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> 元素中,而不是瀏覽器消息框中顯示錯誤消息。
在客戶端腳本中自定義錯誤處理
-
在前面創建的頁面中,切換到“源”視圖。
-
向該頁面中添加以下標記:
該標記包括一些元素,您可以使用這些元素顯示部分頁呈現錯誤。該標記定義了名稱爲 AlertDiv 的 <div> 元素,該元素中包含有他兩個 <div> 元素。其中一個嵌套<div> 元素包含有一個 <input> 控件,用戶可以利用該控件隱藏 <div> 元素。
-
在 <head> 元素中添加下列樣式標記:
<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> 元素後的任意位置。
<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 元素,而不是瀏覽器消息框。下圖演示了一個錯誤條件的示例。
<%@ 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" οnclick="ClearErrorState()" /> </div> </div> </div> </form> </body> </html>