Anpassen der Fehlerbehandlung für ASP.NET-UpdatePanel-Steuerelemente
Aktualisiert: November 2007
Wenn in UpdatePanel-Steuerelementen bei der Teilaktualisierung von Seiten ein Fehler auftritt, wird standardmäßig im Browser ein Meldungsfeld mit einer Fehlermeldung angezeigt. In diesem Lernprogramm wird gezeigt, wie Sie die Darstellung der Fehleranzeige für Benutzer sowie die Fehlermeldung anpassen können.
Vorbereitungsmaßnahmen
Zur Implementierung dieser Prozeduren in Ihrer eigenen Entwicklungsumgebung ist Folgendes erforderlich:
Microsoft Visual Studio 2005 oder Microsoft Visual Web Developer Express Edition.
Eine AJAX-fähige ASP.NET-Website.
Anpassen der Fehlerbehandlung im Servercode
Zuerst passen Sie die Fehlerhandlung an, indem Sie Servercode in der Seite verwenden.
So passen Sie die Fehlerbehandlung im Servercode an
Erstellen Sie eine neue Seite, und wechseln Sie in die Entwurfsansicht.
Doppelklicken Sie in der Toolbox auf der Registerkarte AJAX-Erweiterungen auf das ScriptManager-Steuerelement und das UpdatePanel-Steuerelement, um diese zur Seite hinzuzufügen.
Fügen Sie im UpdatePanel-Steuerelement die folgenden Steuerelemente hinzu:
Zwei TextBox-Steuerelemente
Ein Label-Steuerelement
Ein Button-Steuerelement. Legen Sie dessen Text-Eigenschaft auf Berechnen fest.
Einen kurzen Text in das UpdatePanel-Steuerelement.
Doppelklicken Sie auf die Schaltfläche Berechnen, und fügen Sie folgenden Code für deren Ereignishandler hinzu:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Try Dim a As Int32 a = Int32.Parse(TextBox1.Text) Dim b As Int32 b = Int32.Parse(TextBox2.Text) Dim res As Int32 = a / b Label1.Text = res.ToString() Catch ex As Exception If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then ex.Data("ExtraInfo") = " You can't divide " & _ TextBox1.Text & " by " & TextBox2.Text & "." End If Throw ex End Try End Sub
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; } }
Der Code enthält eine try-catch-Anweisung. Im try-Block führt der Code eine Division der in den Textfeldern eingegebenen Werte aus. Wenn der Vorgang fehlschlägt, fügt der Code im catch-Block die Zusatzzeichenfolge-Informationen unter ExtraInfo der Ausnahme hinzu. Die Ausnahme wird dann erneut ausgelöst, ohne sie zu behandeln.
Wechseln Sie in die Entwurfsansicht, und wählen Sie das ScriptManager-Steuerelement aus.
Klicken Sie im Eigenschaftenfenster auf der Symbolleiste auf die Schaltfläche Ereignisse. Doppelklicken Sie dann auf das Feld AsyncPostBackError, um einen Handler für dieses Ereignis zu erstellen.
Fügen Sie dem AsyncPostBackError-Ereignishandler folgenden Code hinzu:
Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs) If (e.Exception.Data("ExtraInfo") <> Nothing) Then ScriptManager1.AsyncPostBackErrorMessage = _ e.Exception.Message & _ e.Exception.Data("ExtraInfo").ToString() Else ScriptManager1.AsyncPostBackErrorMessage = _ "An unspecified error occurred." End If End Sub
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."; } }
Der Code prüft, ob das ExtraInfo-Datenelement für die Ausnahme definiert ist. Wenn dies der Fall ist, wird die AsyncPostBackErrorMessage-Eigenschaft auf den Wert der Zeichenfolge festgelegt. Andernfalls wird eine Standardfehlermeldung erstellt.
Speichern Sie die Änderungen, und drücken Sie dann STRG+F5, um die Seite in einem Browser anzuzeigen.
Fügen Sie in jedes Textfeld eine Zahl ein, die größer als 0 (null) ist. Klicken Sie dann auf die Schaltfläche Berechnen, um ein erfolgreiches Postback zu veranschaulichen.
Ändern Sie den Wert im zweiten Textfeld in 0 (null). Klicken Sie dann auf die Schaltfläche Berechnen, um einen Fehlerzustand zu erstellen.
Der Browser zeigt ein Meldungsfeld an, das die im Servercode festgelegte Meldung enthält.
Hinweis:
Das Format des Meldungsfelds ist abhängig vom verwendeten Browser, die Meldung ist jedoch in allen Browsern identisch.
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Try Dim a As Int32 a = Int32.Parse(TextBox1.Text) Dim b As Int32 b = Int32.Parse(TextBox2.Text) Dim res As Int32 = a / b Label1.Text = res.ToString() Catch ex As Exception If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then ex.Data("ExtraInfo") = " You can't divide " & _ TextBox1.Text & " by " & TextBox2.Text & "." End If Throw ex End Try End Sub Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs) If (e.Exception.Data("ExtraInfo") <> Nothing) Then ScriptManager1.AsyncPostBackErrorMessage = _ e.Exception.Message & _ e.Exception.Data("ExtraInfo").ToString() Else ScriptManager1.AsyncPostBackErrorMessage = _ "An unspecified error occurred." End If End Sub </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>
<%@ 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>
Anpassen der Fehlerbehandlung mithilfe eines Clientskripts
In der vorherigen Vorgehensweise wurde veranschaulicht, wie Fehler beim Teilrendering von Seiten durch Festlegen der Eigenschaften des ScriptManager-Steuerelements angepasst werden können. In der folgenden Vorgehensweise wird das Anpassen von Fehlermeldungen mithilfe der PageRequestManager-Clientklasse zur Anzeige der Fehlermeldung in einem <div>-Element anstatt in einem Browsermeldungsfeld veranschaulicht.
So passen Sie Fehlerbehandlung in einem Clientskript an
Wechseln Sie in der zuvor erstellten Seite in die Quellenansicht.
Fügen Sie der Seite das folgende Markup hinzu:
<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>
<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>
Das Markup schließt Elemente ein, die zur Anzeige von Fehlern verwendet werden können, die beim Teilrendering von Seiten auftreten. Dieses Markup definiert ein <div>-Element mit dem Namen AlertDiv, das zwei andere <div>-Elemente enthält. Eines der geschachtelten <div>-Elemente enthält ein <input>-Steuerelement, das Benutzern das Ausblenden des <div>-Elements ermöglicht.
Fügen Sie dem <head>-Element das folgende Stilmarkup hinzu:
<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>
<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>
Diese Stile setzen die Fehlerinformationen visuell vom Rest des Seiteninhalts ab.
Wechseln Sie in die Entwurfsansicht, und überprüfen Sie, ob Ihre Seite der folgenden Darstellung ähnelt:
Wählen Sie in der Dropdownliste im oberen Bereich des Eigenschaftenfensters das DOCUMENT-Element (das dem <body>-Element auf der Seite entspricht) aus, und legen Sie dessen Id-Eigenschaft auf bodytag fest.
Wechseln Sie in die Quellansicht.
Fügen Sie den folgenden <script>-Block an eine beliebige Stelle hinter dem <asp:ScriptManager>-Element ein.
<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>
<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>
Mit diesem Skript wird Folgendes ausgeführt:
Es definiert einen Handler für das endRequest-Ereignis der PageRequestManager-Klasse. Im Handler zeigt der Code bei Auftreten eines Fehlerzustands das AlertDiv<div>-Element an.
Es definiert die ToggleAlertDiv-Funktion, mit der das AlertDiv-Element ausgeblendet oder angezeigt wird. Außerdem wird die Seitenfarbe des Fehlerzustands entsprechend geändert.
Es definiert die ClearErrorState-Funktion, mit der die Benutzeroberfläche der Fehlermeldung ausblendet wird.
Speichern Sie die Änderungen, und drücken Sie dann STRG+F5, um die Seite in einem Browser anzuzeigen.
Fügen Sie in jedes Textfeld eine Zahl ein, die größer als 0 (null) ist. Klicken Sie dann auf die Schaltfläche Berechnen, um ein erfolgreiches Postback zu veranschaulichen.
Ändern Sie den Wert im zweiten Textfeld in 0 (null). Klicken Sie dann auf die Schaltfläche Berechnen, um einen Fehlerzustand zu veranschaulichen.
Anstatt des Browsermeldungsfelds wird das benutzerdefinierte AlertDiv-Element angezeigt. Die folgende Abbildung enthält ein Beispiel für den Fehlerzustand.
<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Try Dim a As Int32 a = Int32.Parse(TextBox1.Text) Dim b As Int32 b = Int32.Parse(TextBox2.Text) Dim res As Int32 = a / b Label1.Text = res.ToString() Catch ex As Exception If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then ex.Data("ExtraInfo") = " You can't divide " & _ TextBox1.Text & " by " & TextBox2.Text & "." End If Throw ex End Try End Sub Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs) If (e.Exception.Data("ExtraInfo") <> Nothing) Then ScriptManager1.AsyncPostBackErrorMessage = _ e.Exception.Message & _ e.Exception.Data("ExtraInfo").ToString() Else ScriptManager1.AsyncPostBackErrorMessage = _ "An unspecified error occurred." End If End Sub </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>
<%@ 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>
Zusammenfassung
In diesem Lernprogramm wurde die erweiterte Fehlerbehandlung beim Teilrendering von Seiten veranschaulicht. Sie können die Fehlerbehandlung im Servercode anpassen, indem Sie die AsyncPostBackErrorMessage-Eigenschaft festlegen und das AsyncPostBackError-Ereignis des ScriptManager-Steuerelements behandeln. Im Clientcode können Sie die Fehlerbehandlung anpassen, indem Sie das endRequest-Ereignis der PageRequestManager-Klasse behandeln.
Siehe auch
Konzepte
Arbeiten mit PageRequestManager-Ereignissen