ASP.NET AJAX & ExtJS 4 in 2-way JSON (1)

In this example series I will show you something that might save you some headache – using ExtJS 4 AJAX controls with IIS 6+ running MS AJAX Extensions 1.0. We will need to make a custom proxy for use in stores, which are utilized throughout ExtJS4, i.e. in a combo:

Data will travel back and forth between our server-side C# code and client-side ExtJS 4 in efficient JSON packets, such as: {param:’test’}

In the first example, we will use basic AJAX request to demonstrate the trick that may save you some headache.

Let’s say you’re using an ASP.NET WebMethod like so:

/// <summary>
/// Default.aspx
/// Reads JSON like {param1: 'test'}
/// Returns JSON like {param1: 'test' }
/// </summary>
[WebMethod(EnableSession = true)]
public static Dictionary<string,object> Test( string param1 )
{
	Dictionary<string,object> ret = new Dictionary<string,object>();
	ret.Add("param1",param1);
	return ret;
}

That’s all you need to set up 2-way JSON data.

With ExtJS 4 you might be tempted to use the “params” attribute of the Ext.Ajax.request function, as the API seems to indicate; however, it will not work. The trick is to use jsonData attribute instead! Also, ExtJS 4 makes it easy to parse out the incoming JSON data.

Ext.Ajax.request({
	url: '/Default.aspx/Test'
 
	// this is the trick
	, jsonData: { param1: 'test' }
 
	, callback: function() {}
	, failure: function() {}
	, success: function(response) {
		// Read JSON
		var data = Ext.JSON.decode(response.responseText);
		alert(data.param1); // "test"
	}
}); // eo Ajax