Customizing Error Handling for ASP.NET UpdatePanel Controls

When an error occurs during partial-page updates in UpdatePanel controls, the default behavior is that a browser message box is displayed with an error message. This tutorial shows you how to customize how the error is presented to the user and how to customize the error message.

To implement the procedures in your own development environment you need:

  • Microsoft Visual Studio 2005 or Microsoft Visual Web Developer Express.

  • An AJAX-enables ASP.NET Web site.

To begin, you will customize error handling by using server code in the page.

To customize error handling in server code

  1. Create a new page and switch to Design view.

  2. In the AJAX Extensions tab of the toolbox, double-click the ScriptManager control and the UpdatePanel control to add them to the page.

    UpdatePanel Tutorial
  3. Add the following controls inside the UpdatePanel control:

    UpdatePanel Tutorial
  4. Double-click the Calculate button and add the following code for its event handler:

    No code example is currently available or this language may not be supported.

    The code contains a try-catch statement. In the try block, the code performs division on the values entered into the text boxes. If the operation fails, code in the catch block adds the extra string information in ExtraInfo to the exception and then re-throws the exception without handling it.

  5. Switch to Design view and select the ScriptManager control.

  6. In the toolbar of the Properties window, click the Events button and then double-click the AsyncPostBackError box to create a handler for that event.

    UpdatePanel Tutorial
  7. Add the following code to the AsyncPostBackError event handler:

    No code example is currently available or this language may not be supported.

    The code checks whether the ExtraInfo data item is defined for the exception. If it is, the AsyncPostBackErrorMessage property is set to the string value. Otherwise, a default error message is created.

  8. Save your changes and then press CTRL+F5 to view the page in a browser.

  9. Add a number greater than zero to each text box and then click the Calculate button to demonstrate a successful postback.

  10. Change the second text box value to 0 and then click the Calculate button to create an error condition.

    The browser displays a message box that contains the message that was set in the server code.

    UpdatePanel Tutorial
    NoteNote:

    The style of the message box depends on what browser you are using, but the message is the same in all browsers.

    No code example is currently available or this language may not be supported.

The previous procedure demonstrated how to customize errors during partial-page rendering by setting properties of the ScriptManager control. The following procedure builds on the customization by using the client PageRequestManager class to display the error message in a <div> element instead of in a browser message box.

To customize error handling in client script

  1. In the page you created earlier, switch to Source view.

  2. Add the following markup to the page:

    No code example is currently available or this language may not be supported.

    The markup includes elements that you can use to display partial-page rendering errors. It defines a <div> element named AlertDiv that contains two other <div> elements. One of the nested <div> elements contains an <input> control that will enable users to hide the <div> element.

  3. Add the following style markup in the <head> element:

    No code example is currently available or this language may not be supported.

    The styles make the error information stand out visually from the rest of the page content.

  4. Switch to Design view and verify that your page resembles the following:

    UpdatePanel Tutorial
  5. In the drop-down list at the top of the Properties window, select the DOCUMENT element (which represents the <body> element on the page) and set its Id property to bodytag.

    UpdatePanel Tutorial
  6. Switch to Source view.

  7. Add the following <script> block anywhere after the <asp:ScriptManager> element.

    No code example is currently available or this language may not be supported.

    This script does the following:

    • Defines a handler for the endRequest event of the PageRequestManager class. In the handler, the code displays the AlertDiv <div> element if there is an error condition.

    • Defines the ToggleAlertDiv function, which hides or shows the AlertDiv element and changes the color of the page based on an error condition.

    • Defines the ClearErrorState function, which hides the error message UI.

  8. Save your changes and then press CTRL+F5 to view the page in a browser.

  9. Add a number greater than zero to each text box and then click the Calculate button to demonstrate a successful postback.

  10. Change the second text box value to 0 and then click the Calculate button to demonstrate an error condition.

    The custom AlertDiv element is displayed instead of the browser message box. The following figure shows an example of the error condition.

    UpdatePanel Tutorial
    No code example is currently available or this language may not be supported.

This tutorial showed ways that you can extend error handling during partial-page rendering. In server code you can customize error handling by setting the AsyncPostBackErrorMessage property and handling the AsyncPostBackError event of the ScriptManager control. In client code you can customize error handing by handling the endRequest event of the PageRequestManager class.

Community Additions

ADD
Show: