PDA

View Full Version : [FIXED] Using a Proxy to send json parameters to asp.net web service


michaelreneer
8 Nov 2011, 8:06 AM
First, please forgive me if this is a duplicate bug post. I searched and could not find this issue, but I am new to sencha touch and this forum so I may have missed it.

Ext version tested:

Sencha Touch 2.0.0.pr1
Browser versions tested against:

Safari 5.1.1 (Mac OS X)
DOCTYPE tested against:

<!DOCTYPE html>
Description:

I am trying to use an proxy on a store to populate a list. I need to send the read request as a POST request, set the Content-Type to json, and encode the parameters as json.
Steps to reproduce the problem:

Create Ext.data.Model
Create Ext.data.Store, set ajax proxy and it's actionMethods, header, reader, and url
Create Ext.List and set the store
The result that was expected:

A populated list.
The result that occurs instead:

500 Internal Server Error
Test Case:



Ext.define('app.model.Thing', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
]
});

Ext.define('app.store.Things', {
autoLoad: true,
extend: 'Ext.data.Store',
model: 'app.model.Thing',
proxy: {
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
root: 'd'
},
type: 'ajax',
url: 'http://...service.asmx/GetThings',
extraParams: {
id: '',
token: '',
filter: ''
},
writer: 'json'
},
});

var list = Ext.create('Ext.List', {
itemTpl: '{name}',
store: 'Things'
});


This code gives me a request of:



Request URL:http://...service.asmx/GetThings
Request Method:POST
Status Code:500 Internal Server Error

Request Headers
Content-Type:application/json; charset=UTF-8
Origin:file://
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
X-Requested-With:XMLHttpRequest

Request Payload
id=&token=&filter=
Response Headers

Cache-Control:private
Content-Length:91
Content-Type:application/json; charset=utf-8
Date:Tue, 08 Nov 2011 15:12:40 GMT
jsonerror:true
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET


I can achieve the expected request, however, if I either:

1) On the store: set autoLoad to false and don't set either the extraParams or writer properties. Call the stores load() method with an encoded json object:



this.getThingsStore().load({
params: Ext.JSON.encode({
id: '',
token: '',
filter: ''
})
});


2) Use Ext.Ajax to make the request:



Ext.Ajax.request({
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
method: 'POST',
params: Ext.JSON.encode({
id: '',
token: '',
filter: ''
}),
url: 'http://...service.asmx/GetThings'
});


Either of the above methods yield the following request:



Request URL:http://...service.asmx/GetThings
Request Method:POST
Status Code:200 OK

Request Header
Content-Type:application/json; charset=UTF-8
Origin:file://
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
X-Requested-With:XMLHttpRequest

Request Payload
{"id":"","token":"","filter":""}

Response Headers
Cache-Control:private, max-age=0
Content-Length:15664
Content-Type:application/json; charset=utf-8
Date:Tue, 08 Nov 2011 15:56:41 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET


Please note that the reqeust payload is json.
Jamie Avins
8 Nov 2011, 8:27 AM
Thank you for the detailed report.
TommyMaintz
10 Jan 2012, 9:22 AM
In the next release of Touch 2.0 the Writer will have a new configuration option called 'encodeRequest' which will do exactly what you need.

Writers will now always get a chance to modify the request, even for the read operation, just like reader always get a chance to read the response even for update, create and destroy operations.

The configuration that I tested to achieve your example, and which you will be able to use is:



Ext.define('app.store.Things', {
extend: 'Ext.data.Store',

config: {
autoLoad: true,
model: 'app.model.Thing',
proxy: {
reader: {
type: 'json',
root: 'd'
},
type: 'ajax',
url: 'someurl.json',
extraParams: {
id: '',
token: '',
filter: ''
},
writer: {
encodeRequest: true,
type: 'json'
}
}
}
});
prakash.fs
18 Apr 2012, 11:06 PM
Thanks Tommy.. Working Good..:)
TonyBones
8 May 2012, 12:56 PM
Wow! This just solved my problem too! Glad I searched for it ;)

This is still undocumented. Plus, I wouldn't of even thought to look in the Writer docs because I thought writers were only ever used for create/update/delete crud events. Since when is it used to request a read?

I was looking for this option in the store and proxy classes. I even tried doing what I'm doing in ExtJS 3.4 which is to encode the json in the beforeload event:


//extjs 3.4
beforeload: function (store, options) {
// serialize all the baseParams and manual params to json and encode to send to server

options.params.jsonData = Ext.encode(Ext.applyIf(options.params, store.baseParams));
}

// sencha touch 2
beforeload: function (store, operation, eOpts) {
operation.params = Ext.encode(operation.params);
// But operation.params and operation.getParams() is always null
}
senchaDevLearner
1 Jun 2012, 12:03 AM
Thanks .. Working Good..:)