PDA

View Full Version : ExtJs Store + asp.net PageMethod



melnac
5 Jan 2014, 3:54 AM
Hi,
is there a way to call asp.net WebForm page method ?

I know that i can call a webservice, but my question is specific. I want to call a page method.
If it is possible, someone has a simple example ?

Thanks in advance,
Giuseppe.

Gary Schlosberg
11 Jan 2014, 6:59 AM
I don't have experience with this, but until others contribute I found some (older) links that might prove helpful:
http://www.sencha.com/forum/showthread.php?59903
http://www.sencha.com/forum/showthread.php?121910

pkellner
11 Jan 2014, 7:58 AM
Look at this example of calling a page method from Dave (an asp.net guy) in JQuery.

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

T (http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/)he equivalent in ExtJS is using something like...



Ext.Ajax.request({
url: '/rpc/Account/ClearUnPaidSessions',
method: 'POST',
scope: this,
success: function (r, o) {
...

melnac
28 Jan 2014, 2:14 PM
Hi pkellner,
thanks for reply.

I wrote the ajax request like your example and i can call the pagemethod.

I have two problems now.

First is the i can't show correctly the data in my grid.
This is the code i use:



Ext.define('model.MembUsers', {
extend: 'Ext.data.Model',
fields: [
{ name: 'UserName', type: 'string' },
{ name: 'CreationDate', type: 'date', dateFormat: 'MS', format: 'd/m/Y h:i:s' },
{ name: 'IsApproved', type: 'boolean' },
{ name: 'IsOnline', type: 'boolean' },
{ name: 'IsLockedOut', type: 'boolean' },
{ name: 'LastLoginDate', type: 'date', dateFormat: 'MS' }
]
});

var theStore = Ext.create('Ext.data.Store', {
//extend: 'Ext.data.Store',
model: 'model.MembUsers',
autoLoad: false,
pageSize: 30,
remoteSort: true,
sorters: [{
property: 'UserName',
direction: 'asc'
}],
reader: {
type: 'json',
root: 'data'
}
});

Ext.define('grid.Users', {
extend: 'Ext.grid.Panel',
store: theStore,
model: 'model.MembUsers',
title: 'Utenti',
columns: [
{ header: 'User Name', width: 80, dataIndex: 'UserName' },
{ header: 'Data Creazione', width: 200, dataIndex: 'CreationDate', xtype: 'datecolumn', format: 'd/m/Y h:i:s' },
{ header: 'Approvato', width: 200, dataIndex: 'IsApproved' }
],
border: true,
loadMask: true,
bbar: Ext.create('Ext.PagingToolbar', {
store: theStore,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No topics to display",
listeners: {
beforechange: function (page, eOpts) {
pg.setSource(null)
}
}
})
});

var grid = Ext.create('grid.Users');

Ext.Ajax.request({
url: 'WebForm1.aspx/myMethod1',
method: 'POST',
jsonData: '{Param1:"MyString",Param2: 1}',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
success: function (response, opts) {
var data = Ext.decode(response.responseText);
theStore.loadData(response.responseText);
//theStore.loadData(data);
grid.getView().refresh();
},
failure: function (response, opts) {
Ext.MessageBox.alert('Error', 'server-side failure with status code ' + response.status);
console.log('server-side failure with status code ' + response.status);
}
});


I see the webmethod is called, but the data not are visualized correctly in the grid. Appear only a "false" for the bool field, the others are blank.

In firebug i see the json blob, and it seems correct:
{"d":[{"UserName":"aa1","ProviderUserKey":"b42ca488-b98c-4a1d-8257-9186a3fce83b","Email":"aa@aa.it","PasswordQuestion":"aa","Comment":null,"IsApproved":true,
"IsLockedOut":false,"LastLockoutDate":"\/Date(-6816268800000)\/","CreationDate":"\/Date(1349027455000)\/","LastLoginDate":"\/Date(1386186758280)\/","LastActivityDate":"\/Date(1386186758280)\/","LastPasswordChangedDate":"\/Date(1349106441960)\/","IsOnline":false,"ProviderName":"SqlProvider"},
{"UserName":"bb","ProviderUserKey":"e9dc462b-deb1-4928-a152-6f306ffea6b3","Email":"bb@bb.it","PasswordQuestion":"bb","Comment":null,"IsApproved":true,
"IsLockedOut":false,"LastLockoutDate":"\/Date(-6816268800000)\/","CreationDate":"\/Date(1385365547000)\/","LastLoginDate":"\/Date(1385451373090)\/","LastActivityDate":"\/Date(1385451373090)\/","LastPasswordChangedDate":"\/Date(1385365547000)\/","IsOnline":false,"ProviderName":"SqlProvider"}
]
}

Why i can't see the data in the grid ?

The second answer:
How can do the same directly with the Store ?
In other words, how can call the webmethod from the Store ?

Thanks in advance,
Giuseppe.

pkellner
7 Feb 2014, 9:03 AM
You've got a lot of stuff wrong from what I can tell.if you add a proxy and that proxy has a reader, you can set the url inside there and you should not need the ajax call. to pass the parameters, you can use the store.load({params; {myparam: 'me'}) type call.I'd take a look at the examples and see if you can start from there and clean this up.

melnac
7 Feb 2014, 12:12 PM
Hi pkellner,
you are right and i am a newbie with ExtJs :s

After some googling, i have found an example at http://whatisextjs.com/extjs-4-ajax/asp-net-ajax-extjs-4-in-2-way-json-2 and i do just what you said:



var theStore4 = Ext.create('Ext.data.Store', {
noCache: false,
model: 'model.MembUsers',
autoLoad: { start: 0, limit: 5 },
pageSize: 5,
remoteSort: true,
sorters: [{
property: 'UserName',
direction: 'asc'
}, {
property: 'CreationDate',
direction: 'asc'
}],
proxy: Ext.create('MyOrg.proxy.MSAjaxProxy', {
url: 'WebForm1.aspx/myMethod3',
reader: {
type: 'json',
root: 'd'
}
})
});


and now the grid works correctly.

Can i take advantage of your experience?
I have trouble with treepanel:
http://www.sencha.com/forum/showthread.php?281008-How-to-load-data-in-TreePanel-from-Ajax-Post&p=1027577#post1027577

I see the json data with firebug in the correct format, but i can't see them in the the tree.

Thanks in advance,
Giuseppe.