PDA

View Full Version : Stores and an asp.net web service



michaelreneer
7 Nov 2011, 7:48 AM
New to Ext JS so please forgive me if this is a simple question. I am having difficulty getting a json response back from my asp.net web service. I have searched here on the forums and on stack overflow and have tried a few things, but have been unsuccessful. The below Ajax request returns the expected result in the responceText property of the response:



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',

success: function(response, options) {
console.log(response);
}
});


I am trying to load the array of things into a List object and all of the examples here in the docs use a store for this. I have been unable to get a useful response from the server using a store:



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'
},
extraParams: {
id: '',
token: '',
filter: ''
},
type: 'ajax',
url: 'http://...service.asmx/GetThings',
}
});


I am using safari to load the application and in the error console I am getting the response:



POST http://...service.asmx/GetThings 500 (Internal Server Error)


I can confirm that I need to use a POST method not a GET method for the web service, and that I needed to specifically set the content-type of the request or the web service would not know to give the response back in JSON.

How should I get my my store working? Or should I not be using a store?

Thanks for any help

tvanzoelen
7 Nov 2011, 8:04 AM
Well an Internal Server Error is on the server side. There is some runtime error in your code there.

Maybe some formvariables are not found in the code or it can be everything else. In what language is the webservice coded in. VB, C#? You can see in firebug what kind of request it makes to the server.

michaelreneer
7 Nov 2011, 8:11 AM
Web services are coded in c#.

I figured it couldn't be on the server side, because not only does the Ajax request work, but the web service works in production with my objective-c http requests.

tvanzoelen
7 Nov 2011, 8:11 AM
and take away that komma

type: 'ajax',
url: 'http://...service.asmx/GetThings', <--

so try this



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'
},
extraParams: {
id: '',
token: '',
filter: ''
},
type: 'ajax',
url: 'http://...service.asmx/GetThings'
}
});

michaelreneer
7 Nov 2011, 8:18 AM
Didn't fix the problem and I am getting the same error.

I was messing around with setting the XYZparams properties to null to see if I could get the proxy/store to work and forgot to delete the comma after.

tvanzoelen
7 Nov 2011, 9:18 AM
What if you put the proxy in the config?



Ext.define('app.store.Things', {
autoLoad: true,
extend: 'Ext.data.Store',
model: 'app.model.Thing'
});

Ext.create({
proxy: {
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
root: 'd'
},
extraParams: {
id: '',
token: '',
filter: ''
},
type: 'ajax',
url: 'http://...service.asmx/GetThings'
}
});

michaelreneer
7 Nov 2011, 11:32 AM
First, thanks for all the help. Trying what you suggested...

For my View:


Ext.define('app.view.thing.List', {
config: {
layout: 'fit'
},
extend: 'Ext.Container',

initComponent: function() {
console.log("app.view.thing.List: init component");

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

var toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
title: 'Things'
});

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

this.add([
toolbar,
list
]);

this.callParent();
}
});



For the store, like you suggested:



Ext.define('app.store.Things', {
autoLoad: true,
extend: 'Ext.data.Store',
model: 'app.model.Thing'
});


I am getting 2 errors now:



TypeError: 'undefined' is not an object (evaluating 'b.indexOf')
POST http://...service.asmx/GetThings 500 (Internal Server Error)


When I set the model's autoLoad property to false, and called the load() method on the store after I assigned the lists store property I was able to remove the TypeError. But I am ultimately still getting the same server error.

I am going to once again reiterate that I have no problem using the Ajax request to call the server and calling the server with other frameworks works as expected as well. Thanks again for all your suggestions, do you have any other ideas?

tvanzoelen
7 Nov 2011, 12:10 PM
I am using safari to load the application

Then you are on Apple. On apple you can install firefox and firebug. Plz do that, and give me the request that is send to the server. I can not figure out what's the problem now. You need a program like firebug anyway to work with ExtJs.

michaelreneer
7 Nov 2011, 2:10 PM
Awesome, great idea, here are the request header for the two requests:

This one does not work



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'
},
extraParams: {
id: '',
token: '',
filter: ''
},
type: 'ajax',
url: 'http://...service.asmx/GetThings',
}
});


Gives



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=&page=1&start=0&limit=25


Response Headers
Cache-Control:private
Content-Length:91
Content-Type:application/json; charset=utf-8
Date:Mon, 07 Nov 2011 21:49:55 GMT
jsonerror:true
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET


And...

This one does work



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',

success: function(response, options) {
console.log(response);
}
});


Gives


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


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, max-age=0
Content-Length:15664
Content-Type:application/json; charset=utf-8
Date:Mon, 07 Nov 2011 21:49:55 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET




So it seems when I am using the proxy I am not encoding the extraParams properly as json and we are getting a couple of extra params as well (i.e. page, start, and limit). I have tried to set the pageParams, startParams, and limitParams properties to undefined as the docs say and I have also tried specifying the writer property to json. Neither worked.

Should I be using a different type of proxy for this task?

tvanzoelen
7 Nov 2011, 2:44 PM
Well why don't try to do first the same with the store

extraParams: Ext.JSON.encode({
id: '',
token: '',
filter: ''
}),

jratcliff
7 Nov 2011, 2:58 PM
So it seems when I am using the proxy I am not encoding the extraParams properly as json and we are getting a couple of extra params as well (i.e. page, start, and limit). I have tried to set the pageParams, startParams, and limitParams properties to undefined as the docs say and I have also tried specifying the writer property to json. Neither worked.


Are you sure you correctly set the pageParam, startParam and limitParam to undefined? I just tried it and it worked for me.



Ext.define('app.store.Things', {
autoLoad: true,
extend: 'Ext.data.Store',
model: 'app.model.Thing',
proxy: {

pageParam : undefined,
startParam : undefined,
limitParam : undefined,

actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
reader: {
type: 'json',
root: 'd'
},
extraParams: {
id: '',
token: '',
filter: ''
},
type: 'ajax',
url: 'http://...service.asmx/GetThings',
}
});

michaelreneer
7 Nov 2011, 4:04 PM
Are you sure you correctly set the pageParam, startParam and limitParam to undefined? I just tried it and it worked for me.


Whoops I was using plural properties. At least this part is fixed :)




Well why don't try to do first the same with the store

extraParams: Ext.JSON.encode({
id: '',
token: '',
filter: ''
}),


Yep tried that. Didn't work. The response when I try and encode the extraParams is:


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
0=%7B&1=%22&2=i&3=d&4=%22&5=%3A&6=%22&7=%22&8=%2C&9=%22&10=t&11=o&12=k&13=e&14=n&15=%22&16=%3A&17=%22&18=%22&19=%2C&20=%22&21=f&22=i&23=l&24=t&25=e&26=r&27=%22&28=%3A&29=%22&30=%22&31=%7D
Response Headers


Cache-Control:private
Content-Length:91
Content-Type:application/json; charset=utf-8
Date:Mon, 07 Nov 2011 23:59:58 GMT
jsonerror:true
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET


So I ultimately it seems am still unable to correctly encode the payload as json. Thanks again for all the help to this point. I am still wondering if I should be using a different type of proxy.

Thanks for any additional help.

jratcliff
7 Nov 2011, 6:01 PM
Why again are you using Ext.Json.encode? extraParams expects an object and Ext.Json.encode returns a string.

tvanzoelen
8 Nov 2011, 12:19 AM
Probably the server part expects a JSON format.

So ,what if you set

writer: 'json'

on the proxy?

michaelreneer
8 Nov 2011, 4:34 AM
Why again are you using Ext.Json.encode? extraParams expects an object and Ext.Json.encode returns a string.

I wasn't as that was my interpretation of the documentation as well. I was trying it on tvanzoelen suggestion.



Probably the server part expects a JSON format.

So ,what if you set

writer: 'json'

on the proxy?

This is correct. I tried that as well, but now that I think about it when I was trying that I was also spelling the xyzparam properties wrong. Let me give that a try and I will post back the response I am getting.

michaelreneer
8 Nov 2011, 4:42 AM
Setting the writer on the proxy to 'json' doesn't appear to work either. I am getting a payload of:



id=&token=&filter=


At least I seem to be approaching the right question to ask: how do you configure the proxy of a store to send the parameters as json?

tvanzoelen
8 Nov 2011, 5:04 AM
Setting the writer to JSON I think. Maybe this is something for the department 'BUG'

As alternative solution you can also set params in the call of the load function.

michaelreneer
8 Nov 2011, 5:17 AM
Setting the writer to JSON I think. Maybe this is something for the department 'BUG'

As alternative solution you can also set params in the call of the load function.

So I did try that but the documentation wasn't clear.

When I call load() method on a store I can pass an Ext.data.Operation object into that method. But I didn't see anywhere on the Operation object to configure the parameters. Any advice on how to do that?

tvanzoelen
8 Nov 2011, 5:26 AM
load({params: anarray})

michaelreneer
8 Nov 2011, 6:38 AM
Ok I was able to finally get everything working. After trying a combination of the above suggestions. First my store:



Ext.define('app.store.Things', {
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',
}
});


A couple of things to note:
1) The stores autoLoad property is not set, thus defaulting to false.
2) I didn't need to set any of the xyzparam properties to undefined.
3) I didn't need to set the writer property.

Then you need to call the load method on the store and encode the parameters. In my example this was in the controllers init method:



Ext.define('app.controller.Thing', {
extend: 'Ext.app.Controller',
models: ['Thing'],
stores: ['Things'],
...
init: function(application) {

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


A couple of thoughts:
1) It seems like setting the writer to 'json' should have solved the problem by my interpretation of the documentation. Is this true? And if so should I file a bug? And where? Sorry for being new to the forums :)
2) I could not find documentation on passing parameters like you suggested into the load method. Is this because this is a deprecated property on the Ext.data.Operation object? Or is the documentation not complete?
3) Should I mark this post as the most correct answer as it is the most complete, or should I mark the suggestion above as the correct one that lead me to the solution? I am not sure if you are supposed to mark your own posts as the answer.

Again, thank you very much for all the help.

tvanzoelen
8 Nov 2011, 6:53 AM
1) Maybe not post a bug yet, wait until other users come up with this problem. Probably writer: 'json' works if you send data from the model. Bugs you can post on the Bug thread.

2) You're right it is not anymore in the documentation, but people left some comments about it in the API.

3) People mark their own answers all the time. Mark the post you think is the best answer to the problem you posted. If this is marked people will know it is solved, so mark something.

michaelreneer
8 Nov 2011, 7:15 AM
1) Probably writer: 'json' works if you send data from the model.

In the spirit of testing stuff out I gave this a try and was not successful.

I will search the bugs forum to see if I can find something relating to this. It's difficult because I am not quite sure if I am using the object incorrectly, if there are some undocumented properties I am not utilizing or if there actually is a bug .

thilakmsc
6 Jul 2012, 8:07 PM
Here my code i don't what's wrong in that.

buttons: [{text:'Login',handler : function() {
Ext.Ajax.request
({
url: 'Default.aspx?type=Login',
method: 'POST',
params:
{
action: 'new',
//modify date
Name:'thilak'
},
waitMsg: 'Saving Data...',
success: function(response)
{
var s = response.responseText;
var respon = response.responseText;
if(respon==1)
{
Ext.MessageBox.hide();
Ext.MessageBox.alert('Status','Logged In Successfully');
window.location = 'Login.php';
}
else
{
Ext.MessageBox.hide();
Ext.MessageBox.alert('Status','Log In Failed!');
}
}
});
}
}, {text:'Reset'}]});

C# Code :

string action = Request.QueryString["type"];if (action != string.Empty)
switch (action)
{case "Login":
Response.ContentType = "text/html";
Response.Write(1);
break;
}


But in the i get a Response like :

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title><link href="ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="form1" method="post" action="Default.aspx?type=Login" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDkxNzYwNDNkZMqODl+2ksqIiQHUa9wayQUUyTs9" />
</div>

<div>

<script type="text/javascript" language="javascript" src="ExtJS/adapter/ext/ext-base.js"></script>

<script type="text/javascript" language="javascript" src="ExtJS/ext-all.js"></script>

<script type="text/javascript" language="javascript" src="Scripts/default.js"></script>


</div>
</form>
</body>
</html>


Help :

I need to get only one(1) as result

tvanzoelen
9 Jul 2012, 3:40 AM
I created json handlers for that. Default.aspx returns viewstate and other stuff. In that case you must create a new aspx file and strip all its output.

Or you can do something like this

Create a AjaxHandler.cs



public class AjaxHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{

public AjaxHandler()
{

}

HttpRequest request;
HttpResponse response;
HttpContext context;

public void ProcessRequest(HttpContext context)
{
this.request = context.Request;
this.response = context.Response;
this.context = context;

//In .xml is requested. A file with that extension
//Does not need to exist.

//Content type of the output stream. Extjs dataStores Xmlreaders require the contenttype text/xml
//Response.ContentType = "application/x-json";
response.ContentType = "text/javascript";

//write response here

}


public bool IsReusable
{
// To enable pooling, return true here.
// This keeps the handler in memory.
get { return false; }
}

}


And register it in the webconfig in the httpHandler section


<add path="*.jx" verb="*" type="AjaxHandler"/>

In that way the handler will catch all the jx extentions. In the Ajaxt.Request you set the url like yourservice.jx

You could use an other extention as well