Exception handling plays an important role in any application development. The way we present our exceptions to the user decides the quality of our software. The way we design a pattern for exception handling in C#, ASP.NET we should also design a similar pattern for implementing Ajax exceptions. If an Ajax exception is not caught, then it should as a pop-up directly on the screen showing the exact technical error message with a code. A layman/user will never know what went wrong behind the scene.
Different ways of handling exception in Ajax
1. Using the AsyncPostBackErrorMessage property of the Script Manager class
You can set the exception message that needs to be shown to the user to the AsyncPostBackErrorMessage property of the ScriptManager object. This can be achieved in the following way:
scriptManager.AsyncPostBackErrorMessage = "Oops..\nAn error occurred while processing";
Set the above exception message in the catch block of the method. When an exception occurs, this message will be shown to the user in a pop-up window.
2. Using the above method will show the exception message to the user as a pop-up window. It is not a good practice to show a pop-up on error. Better way to do is to add a Label field to the web page and set the text of that label field with the exception message. For more clarity to the user, the exception message can be shown in Red color. Ajax inherently exposes an event OnAsyncPostBackErrorHandler. This event is invoked when an exception occurs in your web page. It is better to set the exception message in this event as shown below:
protected void OnAsyncPostBackErrorHandler(object sender, AsyncPostBackErrorEventArgs e)
{
scriptManager.AsyncPostBackErrorMessage = "Oops..\nAn error occurred while processing";
}
Is this going to suffice?
The answer it NO. Here we have just handled an event and set the required exception message to the AsyncPostBackErrorMessage property of the scriptManager class. We have to handle another event at client side to set this message to the Label control OR to some DIV as ModalPopupExtender of AjaxControlToolKit and inform the Ajax manager to not show the ugly pop-up:
The key to custom error handling in ASP.NET AJAX is the EndRequestEventArgs class, available when handling the endRequest event. It provides information on any error conditions that have resulted and exposes a method to let the framework know that we’ve handled the errors on our own.
I’m going to add a div, to serve as our replacement error message:
An error has occured while trying to process your request.
Next, some CSS to style the div and close button:
#Error {
top: 0px;
right: 0px;
width: 125px;
background-color: yellow;
border: solid 1px Black;
padding: 10px;
font-family: Sans-Serif;
font-size: 10pt;
position: absolute;
margin: 5px;
}
#CloseButton {
float: right;
cursor: pointer;
}
Finally, we need to add some JavaScript to tie it all together:
Sys.Application.add_load(AppLoad);
function AppLoad()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);
}
function BeginRequest(sender, args)
{
// Clear the error if it's visible from a previous request.
if ($get('Error').style.visibility == "visible")
CloseError();
}
function EndRequest(sender, args)
{
// Check to see if there's an error on this request.
if (args.get_error() != undefined)
{
// If there is, show the custom error.
$get('Error').style.visibility = "visible";
// Let the framework know that the error is handled,
// so it doesn't throw the JavaScript alert.
args.set_errorHandled(true);
}
}
function CloseError() {
// Hide the error div.
$get('Error').style.visibility = "hidden";
}
The crux of this method is EndRequestEventArgs.set_errorHandled(). This tells the AJAX framework to call off the dogs and prevents the JavaScript alert from being displayed. Now, clicking Button1 results in this:
We have complete control over the error display. No JavaScript alert!
Happy Coding :)
