Handling exceptions in ASP.NET Ajax

If you ever used ASP.NET Ajax and UpdatePanels you must have seen the annoying alert window that pops up when error occurres during Ajax request. Since WebFu event where Milica and I presented ASP.NET Ajax, many developers asked us how to "kill" this popup window.

I'm going to show you two simple ways to kill the popup window forever. Note: You can find the complete source code in the attachment.

Handling exceptions in ASP.NET Ajax using JavaScript

Let's say we have two buttons inside the UpdatePanel. One that will perform a successful Ajax postback and render the current time, and one that will cause an error. We also have a div (divError) that will display the error message if one occurres. Don't remember that we need a ScriptManager on every Ajax-enabled web page. The code below shows this case.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
   
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
       
<ContentTemplate>
           
<div id="divError" class="Error">
               
<asp:Image ID="Image1" runat="server"
                   
ImageUrl="~/error_16x16.gif" ImageAlign="AbsMiddle" />
               
Oooooops, <div id="divMessage" class="Message"></div>
           
</div>
           
<p>
               
<asp:Button ID="Button2" runat="server"
                   
Text="Create successful Ajax PostBack" OnClick="Button2_Click" />
               
<asp:Button ID="Button1" runat="server"
                   
Text="Create Exception!" OnClick="Button1_Click" />
           
</p>
           
<p>
               
<asp:Label ID="lblDateTime" runat="server"></asp:Label>
           
</p>
       
</ContentTemplate>
   
</asp:UpdatePanel>
</div>

Now let's see what is happening on the server. Request that performs a successful Ajax postback will render the time in a label. The other one will throw generic Exception.

protected void Button1_Click(object sender, EventArgs e)

{

    throw new Exception("Exception generated on server occurred!");

}

 

protected void Button2_Click(object sender, EventArgs e)

{

    lblDateTime.Text = "The last Ajax PostBack occurred at " +
        DateTime.Now.ToString();

}

Now comes the key point. We are going to create three JavaScript functions that will do all the work. First, we'll hook on PageRequestManager class and add a handler that will handle EndRequest event (the code in blue box). Next, we'll proccess the arguments (EndRequestEventArgs class). We'll use get_error() property accessor method to determine if any error occurred. Then we'll get the Exception source message and render it in our <div>. The last and the most important thing that we have to do is to set the ErrorHandled flag to true. By doing this we are preventing the alert widnow to popup.

Handling exceptions using ScriptManager events

We can use some of ScriptManager functionality to handle exceptions in ASP.NET Ajax postbacks. Let's change slightly the example above. We'll define OnAsyncPostBackError handler in the definition of ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server"
   
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError" />

On the server, we'll get the Exception message from AsyncPostBackErrorEventArgs class and pass it to the ScriptManager.

   

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)

{

    ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message;

}

All other code will be the same as in the example above.

Conclusion

You saw how to use ScriptManager and JavaScript to handle exceptions that occurres durign Ajax requests. This example is very basic and can be extended. You can use a server user control, you can filter the exceptions uisng get_error().httpStatusCode or something else that is included in your exception handling strategy.

You can find the source code in the attachment.

AddThis Social Bookmark Button

Published Wednesday, February 13, 2008 11:12 PM by janko
Filed under: ,
Powered by Community Server (Commercial Edition), by Telligent Systems