How to call an ASP.NET Web Service using ScriptTag Proxy

[sukanta]

Hi,

I am unable to call an ASP.NET Web Service to populate a sencha list using ScriptTag Proxy . It would be really helpful for me if I will get a proper guidance on this.

Sencha Code

new Ext.Application({
name: 'MyApp',
useLoadMask: true,
launch: function() {

Ext.regModel('Employee',
{ fields: ['Name', 'Company'] });

var ListStore = new Ext.data.Store({

model: 'Employee',
autoLoad: true,

proxy: {
type: 'ScriptTag ',
url: 'http://10.227.87.2/ServiceDemo/Service.asmx/TestJSON


',headers: {'Content-Type' : 'application/json;charset=utf-8'},
reader: {
type: 'json',
root: 'd'
}
}
});

var list = new Ext.List({
fullscreen: true,
itemTpl: '{Name} {Company}',
store: ListStore
, onItemDisclosure: function(record) {
Ext.Msg.alert('Tap', 'Disclose more info for : ' + record.get('Name'), Ext.emptyFn);
}
});
}
})

Web Service:

public class Employee
{
public string Name { get; set; }
public string Company { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public string Country { get; set; }
}

List<Employee> empDetails = new List<Employee>{
new Employee{Name = "Ajay Singh",Company = "Birlasoft Ltd.",Address = "LosAngeles California",Phone = "1204675",Country = "US"}
};

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json,UseHttpGet = true, XmlSerializeString = false)]
public List<Employee> TestJSON()
{
return empDetails;
}




Thanks & Regards,
Sukanta Ghorui

[ppalaciosm]

your response use scripttag format callback(json); ?

in your asp, read callback parameter and print with response

[martincf]

Hi there,

Are you sure that the web service is working? Have you used a tool like Fiddler2 to take Sencha Touch out of the equation and make sure the service is working first?

Martin

[sukanta]

Hi,

Thanks for your mail.

The Web Service I am using which is used to return a JSON response as mentioned below -

Namespace
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;
using System.ServiceModel.Web;

public class Employee
{
public string Name { get; set; }
public string Company { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public string Country { get; set; }
}

List<Employee> empDetails = new List<Employee>{
new Employee{Name = "Ajay Singh",Company = "Birlasoft Ltd.",Address = "LosAngeles California",Phone = "1204675",Country = "US"}
};

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetEmployeeJson()
{
DataContractJsonSerializer serializer = new DataContractJsonSerializer(empDetails.GetType());
MemoryStream ms = new MemoryStream();
serializer.WriteObject(ms, empDetails);
string jsonString = Encoding.Default.GetString(ms.ToArray());
ms.Close();
string cb = "stcCallback1001";
//string cb = HttpContext.Current.Request.Params.Get("callback");

string responseString = "";
if (!string.IsNullOrEmpty(cb))
{
responseString = cb + "(" + jsonString + ")";
}
else
{
responseString = jsonString;
}
return responseString;
}

Result: stcCallback1001([{"Address":"LosAngeles California","Company":"Birlasoft Ltd.","Country":"US","Name":"Ajay Singh","Phone":"1204675"}])

When used the following lines of code in sencha touch Proxy -



proxy: {
type: 'scripttag'
, url: 'http://localhost:3909/FileUpload.asmx/GetEmployeeJson'
, headers: { 'Content-Type': 'application/json;charset=utf-8' }
, reader: {
type: 'json'
,root: 'd'
}
, callbackParam: 'callback'
, callbackPrefix: 'stcCallback1001'
}



I used to get the following error -


Request URL: http://localhost:3909/FileUpload.asm...2ASC%22%7D%5D&callback=stcCallback10011001
Request Method:GET
Status Code:500 Internal Server Error


Now I have deleted hardcoded value - string cb = "stcCallback1001" from service and uncomment string cb = HttpContext.Current.Request.Params.Get("callback") and modify the proxy in sencha touch like -
proxy: {
type: 'scripttag'
, url: 'http://localhost:3909/FileUpload.asmx/GetEmployeeJson'
, headers: { 'Content-Type': 'application/json;charset=utf-8' }
// , reader: {
// type: 'json'
// ,root: 'd'
// }
// , callbackParam: 'callback'
// , callbackPrefix: 'stcCallback1001'
}

I used to get the following error -

Request URL:

http://localhost:3909/FileUpload.asmx/GetEmployeeJson?_dc=1323761404823&limit=25&sort=%5B%7B%22property%22%3A%22lastName%22%2C%22direction%22%3A%22ASC%22%7D%5D&callback=stcCallback1001

• Request Method:
  GET
• Status Code:
  500 Internal Server Error
• Request Headers
  • Accept:
    */*
  • Referer:
    http://localhost:3909/SenchaDemo.htm
  • User-Agent:
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.0 Safari/534.3
• Query String Parameters
  • _dc:
    1323761404823
  • limit:
    25
  • sort:
    [{"property":"lastName","direction":"ASC"}]
  • callback:
    stcCallback1001
• Response Headers
  • Cache-Control:
    private
  • Connection:
    Close
  • Content-Length:
    4460
  • Content-Type:
    text/html; charset=utf-8
  • Date:
    Tue, 13 Dec 2011 07:30:04 GMT
  • Server:
    ASP.NET Development Server/9.0.0.0
  • X-AspNet-Version:
    2.0.50727

Can you please check and let me know whether i am missing anything else ?



Thanks & Regards,
Sukanta Ghorui

[Sameer Khan]

My Model is :
1. Ext.regModel('UserProfile', {
idProperty:'id',
fields: ['id', 'Login_ID', 'username', 'password','LastSynckDate']
});


2. this.store = new Ext.data.Store({
model: 'UserProfile',
sorters:'username',
proxy:{
type: 'scripttag',
url: 'http://www.xxx.com/UserProfile.ashx?UserId='+currUsr,
reader: {type: 'json'},
timeout:5000,
listeners:{
exception:{
element: 'el',
fn:function(){
Ext.Msg.alert("","Server not responded while downloading UserProlifelist.<br/>Please try Again.", function(){myMask.hide();}).doComponentLayout();
}
}
}
},
listeners:{load:this.onStoreLoaded,scope:this},
});

3. onStoreLoaded: function(store,records, successful) {
store.sort('lname','ASC');
store.getGroupString = function(record){return record.get('username')[0];};
var groupingBase = {
itemTpl: '<h2 class="fieldbar;">{username}</h2>',
multiSelect: true,
simpleSelect: true,
scroll:'vertical',
emptyText:'<div class="emptyText">There no clients to select</div>',
grouped:true,
indexBar:true,
storetore
};

this.clist= new Ext.List(
Ext.apply(groupingBase,{
centered: true,
}
&nbsp);
this.add( this.clist );
this.doLayout();
myMask.hide();
},

[ppalaciosm]

In your asp replace

responseString = cb + "(" + jsonString + ")";

with

responseString = cb + "(" + jsonString + ");";

for callback, you can read parameter and print in the responseString or equals to cb var.

[sukanta]

Hi,


Thanks for your response.


I have tried all the ways you have suggested to do, but no luck till now.


I have also tried to return a hardcoded JSON format from service as per the sencha docs
(http://docs.sencha.com/touch/1-1/#!/api/Ext.data.ScriptTagProxy) like below -


[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetEmployeeJson()
{
string strResponse = "stcCallback1001({d: [ { firstName: 'TestFName', lastName: 'TestLName' } ]});";
return strResponse;
}


But while trying to browse this with IE, then I used to get the response like below -


<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://tempuri.org/">[{"firstName":"TestFName","lastName":"TestLName"}]</string>


which is not the proper JSON format which I wanted only like -
stcCallback1001([{"Name":"Ajay Singh","Company":"Birlasoft Ltd."}]);


Then, I have tried with my code in service and received the response like below -


<?xml version="1.0" encoding="utf-8" ?>
<string xmlns="http://tempuri.org/">stcCallback1001([{"Name":"Ajay Singh","Company":"Birlasoft Ltd."}]);</string>


When I tried to run my Sencha Application, the following reported as


Error:


Failed to load resource: the server responded with a status of 500 (Internal Server Error)


Error details:


Request


URL:http://localhost:3909/FileUpload.asm...operty%22%3A%2


2lastName%22%2C%22direction%22%3A%22ASC%22%7D%5D&callback=stcCallback1001
Request Method:GET
Status Code:500 Internal Server Error

So, I think that because of the improper JSON response from Service, sencha application is not able to call service using ScriptTag Proxy.

Can you please help me out this issue and give me the proper guidance of how to return a proper JSON response from service as per the sencha docs (http://docs.sencha.com/touch/1-1/#!/...ScriptTagProxy) ?

Thanks & Regards,
Sukanta Ghorui