Update panel not showing errors in ASP.NET 3.5

Question

In Visual Studio 2008 if you create a new "Ajax 1.0 Enabled ASP.NET 2.0 Web Application" and paste the following code:

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
       <asp:Button runat="server" ID="foo" Text="click me" onclick="foo_Click" />  
      </ContentTemplate>
        </asp:UpdatePanel>
        </div>
    </form>

code behind

protected void foo_Click(object sender, EventArgs e) {
      throw new Exception("hello");
     }

and then click the button, you'll see a javascript alert that says "hello". If you create a .NET 3.5 Web Application and paste the same code in, no alert shows up anymore. What am I missing?

Answer 1

There was definately a change between the default behavior in the ASP.NET AJAX Extensions 1.0 and ASP.NET AJAX 3.5. This can been seen by looking at the default endPostBack event handlers for the Sys.WebForms.PageRequestManager. The former version displays the error using an Alert while the later just rethrows the error.

// ASP.NET AJAX Extensions 1.0
function Sys$WebForms$PageRequestManager$_endPostBack(error, response) {
  this._processingRequest = false;

  this._request = null;
  this._additionalInput = null;

  var handler = this._get_eventHandlerList().getHandler("endRequest");
  var errorHandled = false;
  if (handler) {
    var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, this._dataItems, response);
    handler(this, eventArgs);
    errorHandled = eventArgs.get_errorHandled();
  }
  this._dataItems = null;
  if (error && !errorHandled) {
    alert(error.message);
  }
}


// ASP.NET 3.5
function Sys$WebForms$PageRequestManager$_endPostBack(error, executor, data) {
  if (this._request === executor.get_webRequest()) {
    this._processingRequest = false;
    this._additionalInput = null;
    this._request = null;
  }
  var handler = this._get_eventHandlerList().getHandler("endRequest");
  var errorHandled = false;
  if (handler) {
    var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, data ? data.dataItems : {}, executor);
    handler(this, eventArgs);
    errorHandled = eventArgs.get_errorHandled();
  }
  if (error && !errorHandled) {
    throw error;
  }
}

If you want the Alert to appear in your ASP.NET AJAX 3.5 code, you just need to make some small changes.

First, you need to add an handler for the ScriptManager's AsyncPostBackError event and then set the AsyncPostBackErrorMessage.

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
    ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;
}

Then you need to add a handler for the client-side PageRequestManager's endRequest event. In there, you can get the AsyncPostBackErrorMessage set on the server-side and use an Alert to display the message to the user.

function pageLoad()
{
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);  
}

function onEndRequest(sender, args)
{
  var msg = args.get_error().message;
  alert(msg);
  args.set_errorHandled(true);
}

I hope this helps.

Answer 2

I wrote here about a simpler way to do this: http://www.wagnerdanda.me/2010/01/asp-net-ajax-updatepanel-error-exception-handling-the-simple-way/

If you just want to fix the browser javascript error and display the exception message to the user, you just need to add this to your Masterpage somewhere after the form declaration:

<!-- This script must be placed after the form declaration -->
<script type="text/javascript">
    Sys.Application.add_load(AppLoad);

    function AppLoad() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
    }

    function EndRequest(sender, args) {
        // Check to see if there's an error on this request.
        if (args.get_error() != undefined) {

            var msg = args.get_error().message.replace("Sys.WebForms.PageRequestManagerServerErrorException: ", "");

            // Show the custom error. 
            // Here you can be creative and do whatever you want
            // with the exception (i.e. call a modalpopup and show 
            // a nicer error window). I will simply use 'alert'
            alert(msg);

            // Let the framework know that the error is handled, 
            //  so it doesn't throw the JavaScript alert.
            args.set_errorHandled(true);
        }
    }
</script>

You do not need to catch the OnAsyncPostBackError even unless you want to customize the message. Go to my blog post if you want more information about this.