View Full Version : Consume a .Net WebService

6 Sep 2012, 3:19 AM

Just though I share my solution for consuming a .Net webservice using Sencha Touch and json.

So assuming you have solved all the cross-origin issues (by following for instance http://enable-cors.org/ (http://enable-cors.org/#how-iis7) or having the webapp on same server as, well your server) you still run into issues of varying kinds. You need for instance to ensure the method is POST that all parameters are included as JSON data (in jsonData) and so on.

For me I had two issues, no1 was having a ajax proxy auto-loading a store from one method of the WS, no2 was that I needed access to a lot of different methods on this WS.

I ended up with two seperate solutions, one was an override of the Ext.data.proxy.Ajax that ensured data in extraParams were added to jsonData.

//This is the same as the original Ext.data.proxy.Ajax.doRequest (Sencha touch 2.0.1) exept for one line that is especially commented
Ext.override(Ext.data.proxy.Ajax, {
doRequest: function(operation, callback, scope){
var writer = this.getWriter(),
request = this.buildRequest(operation);

headers : this.getHeaders(),
timeout : this.getTimeout(),
method : this.getMethod(request),
callback : this.createRequestCallback(request, operation, callback, scope),
scope : this,
jsonData : this.getExtraParams() //ADDED: to enable a proper json call to a .Net web service

if (operation.getWithCredentials() || this.getWithCredentials()) {

request = writer.write(request);


return request;


And for your reference, here is the proxy declaration that I used:

proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
enablePagingParams: false,
noCache: false,
url: 'http://MyWebService.example.com/Service1.asmx/getAll',
headers: {
'Content-Type': 'application/json'
reader: {
type: 'json',
rootProperty: 'd' //Always 'd' when using a .Net WebService I believe... could be wrong though
writer: {
type: 'json'

For my various other methods that didn't need a store but were more of a one-shot-forget methods, I ended up defining a new data.connection as such:

Ext.define('Ext.WebService', {
extend: 'Ext.data.Connection',
singleton: true,
enablePagingParams: false,
noCache: false,
method: 'post',
baseUrl: 'http://MyWebService.example.com/Service1.asmx/',
jsonData: { },
autoAbort : false,
setupUrl: function(options, url) {
var form = this.getForm(options);
if (!url && options.wsFunction) {
url = this.baseUrl + options.wsFunction;// + ? + Ext.urlEncode(options.jsonData)
//urlEncode that is out-commented above seems to be necessary _sometimes_, havn't quite figured this one out...
if (form) {
url = url || form.action;
return url;

Which enable me to use my WS in the following way:

Ext.WebService.request({wsFunction: 'theMethod', jsonData:{id:1, uid: 123}});
//Makes an proper ajax call to http://MyWebService.example.com/Service1.asmx/theMethod

So why the extension, well several reasons, for one I needed a lot of WS calls to different methods which this simplified. Further more I thought I needed the url-rewrite that now is at least temporarily out-commented, and I plan on working a little more on the "Ext.WebService" and maybe even write a proper class that handles my WS how about Ext.WebService.theMethod({id:1, uid:123}).

Take this code as-is, it certainly needs error handling and further adjustments, but this is what I have done to enable proper usage of a .Net web service. Hope it helps someone with at least some pointers, as I have been struggling quite hard in the unknown with this.

I happily receive applauds and constructive feedback :)

PS. As I'm working in Sencha Architect, I've put my both overrides in the controller init function, good or bad? DS.

19 Sep 2012, 11:25 AM
Instead of overriding Ajax proxy, why not make your own proxy?