Ever wanted to handle your ASP.NET AJAX errors a little bit cooler? Here's a little something
you can use to add a bit more value to your ASP.NET AJAX applications and its very simple to add to your applications.
To test it out, you'll want to add a PageMethod or WebMethod.
function startAjaxRequest()
{
PageMethods.MyPageMethod(onSuccess, onError, 'my context');
}
Inside that method throw an error. I created a good ole divide by zero exception.
Next thing you'll want to do is write the OnError method:
function onError(error)
{
var errorControl = new Societymedia.AjaxErrorControl(error,'ajax-error');
errorControl.Render();
}
Pass in the error that gets returned from the server and pass in the container element from the page.
All that's needed is the .js file, a div and 2 lines of code. Try this out and let me know what you think. All that's left is some styling.
Heres the .js file
// global variables
var _toggled = false;
// global methods
function Societymedia$AjaxErrorControl$ToggleDetails()
{
var __ajaxdetails = $get('__ajaxdetails');
if(!_toggled){
__ajaxdetails.style.display = '';
_toggled = true;
}
else{
__ajaxdetails.style.display = 'none';
_toggled = false;
}
}
// register namespace
Type.registerNamespace('Societymedia');
// constructor
Societymedia.AjaxErrorControl = function(error, element)
{
///<summary>
///AjaxErrorControl
///</summary>
///<param name="error" type="Object">
///The Error that gets returned from the server
///</param>
///<param name="element" type="string">
///The id of an element on the page which will host the AjaxErrorControl
///</param>
this._error = error;
this._domElement = $get(element);
if(this._domElement == null)
{
alert('Opps! Looks like you forgot to include an element on your page with an id of ' + element + '.');
throw Error.argumentUndefined();
}
this._removeNodes(this._domElement);
_toggled = false;
}
// prototype
Societymedia.AjaxErrorControl.prototype =
{
Render : function()
{
///<summary>
/// The Render Method will use error object passed in to the ctor to fill the asp.net error template
///</summary>
// create local variables that will be string.format() in the template
var errorMessage = this._error.get_message();
var statusCode = this._error.get_statusCode();
var stackTrace = this._error.get_stackTrace();
var exceptionType = this._error.get_exceptionType();
// create the template
var template = new Sys.StringBuilder();
template.append('<h1>Server Error in \'{0}\' Application.</h1>');
template.append('<hr />');
template.append('<h2><em>{1}</em></h2>');
template.append('<p><strong>Description:</strong> An unhandled exception occurred during the execution of the current AJAX request. Please review the stack trace for more information about the error and where it originated in the code.</p>');
template.append('<p><strong>Exception Details:</strong> {2}: {1}</p>');
template.append('<p><strong>Source File:</strong> {3}</p>');
template.append('<p><strong>Stack Trace:</strong></p>');
template.append('<p>{4}</p>');
var formattedTemplate = String.format(template.toString(),document.location.pathname, errorMessage, exceptionType, document.URL, stackTrace);
var errorText = '<p>Opps! An error has occured during the execution of the current AJAX request.</p><div>For a detailed description of the error, please click the button</div><p>We\'re Sorry for the inconvenience.</p>';
var divErrorText = this._createElement('div');
this._setText(divErrorText, errorText);
this._domElement.appendChild(divErrorText);
var detailsButton = this._createElement('input');
detailsButton.setAttribute('id', '__ajaxdetailsbutton');
detailsButton.onclick = Societymedia$AjaxErrorControl$ToggleDetails;
detailsButton.setAttribute('value', 'Details');
detailsButton.setAttribute('type', 'button');
this._domElement.appendChild(detailsButton);
var divFormatted = this._createElement('div');
divFormatted.setAttribute('id', '__ajaxdetails');
divFormatted.style.display = 'none';
this._setText(divFormatted, formattedTemplate);
this._domElement.appendChild(divFormatted);
},
_createElement:function(type)
{
///<summary>
///creates an element of type
///</summary>
///<param name="type" type="string">
///is this the type we want to return
///</param>
return document.createElement(type);
},
_removeNodes:function(element)
{
///<summary>
///Removes all children inside the element
///</summary>
///<param name="element" type="HTMLDOMElement">
///this is the HTMLDOMElement we want to add text to
///</param>
for(var i=element.childNodes.length-1;i>=0;i--)
{
element.removeChild(element.childNodes[i]);
}
},
_setText:function(element,value)
{
///<summary>
///Basically just innerHTML'ing the value to the element
///</summary>
///<param name="element" type="HTMLDOMElement">
///this is the HTMLDOMElement we want to add text to
///</param>
///<param name="value" type="string">
///The Text to be added to the HTMLDOMElement
///</param>
element.innerHTML = value;
}
}
Societymedia.AjaxErrorControl.registerClass('Societymedia.AjaxErrorControl');