What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

20Mar/124

ASP.NET MVC3 & ExtJS4 Errors

In my previous post I presented an example of a basic ASP.NET MVC3 controller connecting to an ExtJS4 data store and passing some data in XML format via store's load method.

So far I've run into just one issue with this setup - clean error handling. By default, ASP.NET MVC will spit out any exceptions in clear text (with <html> tags and everything), which is not very useful when building a quality web application. Here's what I want on my errors:



Let's start off with a custom C# attribute that we'll be using for our ASP.NET MVC3 controller methods:

/// <summary>
/// Used for AJAX error handling.
/// Causes unhandled exceptions to become JSON messages such as:
/// {ExceptionType:...,Message:...,StackTrace...}
/// Request set to HTTP error code 500.
/// </summary>
public class CustomAjaxErrorHandler : FilterAttribute, IExceptionFilter
{
	public void OnException(ExceptionContext filterContext)
	{
		Exception e = filterContext.Exception;
		// Prevent text dump of exception
		filterContext.ExceptionHandled = true;
		// 500 HTTP status
		filterContext.RequestContext.HttpContext.Response.StatusCode =
			(int)HttpStatusCode.InternalServerError;
		filterContext.Result = new JsonResult
		{
			Data = new 
			{ // Returned JSON
				ExceptionType = e.GetType().ToString(),
				Message = e.Message,
				StackTrace = e.ToString()
			},
			JsonRequestBehavior = JsonRequestBehavior.AllowGet
		};
	}
}

...and here's sample usage in a Search method shown in previous example:

[HttpPost]
[CustomAjaxErrorHandler]public ContentResult Search( string query )
{
	throw new Exception("Test error message!");
	...
}

Finally, here are some examples of handling such errors from ExtJS4 data store or just a basic Ajax request, with a pretty window display as shown in screenshot above:

// Intercepting from XML store
Ext.create('Ext.data.Store',{
	model: 'MY.model.SearchResult',
	proxy: Ext.create('MY.proxy.MSAjaxProxy', {
		url: '/User/Search',
		reader: { type: 'xml', root: 'matches', record: 'match' },
		listeners: {
			exception: function( thisProxy, response, operation, options ) {
				handleAjaxError(response);			}
		} // eo listeners
	}) // eo proxy
}) // eo store
 
// Intercepting from simple Ajax call
Ext.Ajax.request({
	...
	failure: function(response) { 
		handleAjaxError(response);	},
	success: function(response) { ... }
}); // eo Ajax
 
// Custom error handler window
handleAjaxError = function ( ajaxResponse ) {
	var responseData = Ext.JSON.decode(ajaxResponse.responseText),
		win = null,
		windowConfig = null;
 
	if (!responseData) // request timed out?
	{
		responseData = {
			ExceptionType: 'Timeout',
			Message: 'It appears the request timed out, please try again!' 
		};
	}
 
	// Window to show
	windowConfig = {
		title: 'Error: ' + Ext.htmlEncode(responseData.ExceptionType),
		layout: 'anchor',
		defaults: { anchor: '100%' },
		modal: true,
		resizable: false,
		width: 400,
		items: 
		[
			{ 
				xtype: 'container'
				, autoScroll: true
				, html: '<img style="float: left; padding: 5px;" src="../extjs/resources/themes/images/gray/shared/icon-error.gif">'
					+ Ext.htmlEncode(responseData.Message)
			}
		], // eo items
		buttons:
		[
			{ text: 'OK', handler: function() { win.destroy(); } }
		], // eo buttons
		listeners: {
			afterrender: { // make sure layout sized properly
				single: true,
				buffer: 10,
				fn: function() { return; win.doLayout(); }
			} // eo afterrender
		} // eo listeners
	};
 
	// Stack trace panel on the bottom?
	if ( responseData.StackTrace )
	{
		windowConfig.items.push({
			xtype: 'panel',
			title: 'Stack Trace',
			collapsible: true,
			collapsed: true,
			titleCollapse: true,
			layout: 'fit',
			listeners: {
				collapse: function() { win.doLayout(); },
				expand: function() { win.doLayout(); } 
			},
			items: {
				xtype: 'textarea',
				readOnly: true,
				height: 150,
				value: responseData.StackTrace
			}
		});
	}
 
	win = Ext.create('Ext.window.Window', windowConfig);
	win.show();
}
VN:F [1.9.22_1171]
Rating: 9.4/10 (7 votes cast)
ASP.NET MVC3 & ExtJS4 Errors, 9.4 out of 10 based on 7 ratings
Comments (4) Trackbacks (0)
  1. where are u creating the window “win” and how to apply the windowConfig to window “win”, i just tried the code and no error window is coming up.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  2. Oh I guess I forgot the last 2 lines of that script:

    win = Ext.create(‘Ext.window.Window’, windowConfig);
    win.show();

    Thanks for pointing that out – I added them to the very bottom.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    • I tried it but the window still doesn’t come up actually the config is not being passed to the “win” object.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      • Well yes that’s true but as i was using extjs 3.4 that “Ext.create” didn’t work

        but now it is working with the below part:
        win = new Ext.Window(windowConfig);
        win.show();

        Thanks very much.

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.