Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Handling Ajax Errors in ASP.NET

, 21 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to handle Ajax errors in ASP.NET

Introduction

Yesterday, I wrote about issue with Ajax postbacks in an application I am working currently. The problem was with buttons that was triggering UpdatePanels to update asynchronously. After adding loading indicator, I wanted to add error handling at client side.

As loading was handled by PageRequestManager events, I was trying to achieve errors in the same way. At first, I created some HTML to show when error happens:

<div id="errorDialog" class="hidden">
    <div class="ui-widget center height100per width100per">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
            <p>
                <span class="ui-icon ui-icon-alert" style="float: left; 
                	margin-right: .3em;"></span>
                <strong>Error:</strong>
                <br />
                <span id="errorDesc"></span></p>
        </div>
    </div>
</div>

It creates Alert container from jQueryUI theme as you can see here. For me, it looks like this:

Styles are mostly from this library. My classes have meaningful names and are defined:

.width100per
{
    width:100%;
}
.height100per
{
    height:100%;
}

Folks at Microsoft do not add special event for errors in PageRequestManager, args argument of event handler for endRequest handler can tell as if something bad happened inside our application:

pageManager.add_endRequest(function (sender, args) {
        if (args.get_error() != undefined) {
                alert("Ouch!");
                alert(args.get_error().message);
        }
});

Now we have to just add some logic to show the error message inside our error container:

pageManager.add_endRequest(function (sender, args) {
        if (args.get_error() != undefined) {
            var errorMessage = args.get_error().message;
            args.set_errorHandled(true);
            jQuery('#errorDesc').html(htmlEncode(errorMessage).replace(":", "<br />"));
            jQuery('#errorDialog').dialog({
                width: 600,
                height: 300
            });
        }
        function htmlEncode(value) {
            return jQuery('<div/>').text(value).html();
        }
    });

htmlEncode function replaces special HTML characters like < or > with HTML entities. It works by creating in-memory-only div element, and then setting some HTML as text and getting this as HTML. Simple as that. I added replacing : with HTML next line to show error description from C# in the below summary of exception. After that dialog is opening to show to user that something bad happens.

Dialog is much bigger than it needs to be, but I think that user must know that it's something serious and bigger message helps with that. Smile

That's all!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

n.podbielski
Software Developer
Poland Poland
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 22 May 2013
Article Copyright 2013 by n.podbielski
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid