Unable to Populate a Sencha List by calling an ASP.NET Web Service - Please HELP

[sukanta]

Hi,

I am very new to Sencha touch and found very interesting to learn this technology.

After learning , I tried to populate a Sencha List by calling an ASP.NET Web Service. But unfortunately, it's not working. For the last couple of days I am just trying to find out a complete article on this, unfortunately nothing is helpful for me. It would be really helpful for me if you please throw some lights on Populate a Sencha List by calling an ASP.NET Web Service. Here is my Code -

ASP.NET WEB SERVICE:

using System;using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;


namespace WebServiceDemo
{
/// <summary>
/// Summary description for WebService1
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
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]
public List<Employee> TestJSON()
{
return empDetails;
}
}
}


SENCHA TOUCH:

Ext.setup({


fullscreen: true,
glossOnIcon: false,
onReady: function() {


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


var listStore = new Ext.data.Store({


autoLoad: true,
model: 'Employee'


/** POPULATE RECORDS USING AJAX PROXY **/


, proxy: {
type: 'ajax',
url: 'http://localhost:3909/FileUpload.asmx?op=TestJSON',
//url: 'http://10.227.87.2/ServiceDemo/Service.asmx?op=TestJSON',


// Ask for Json response
headers: { 'Content-Type': 'application/json;charset=utf-8' },
method: 'GET',
reader: {
type: 'json'
, root: 'd'
}
}
, listeners: {
load: function(store, records, success) {
console.log(store);
console.log(records);
console.log(success);
}
}


});


var listDemo = new Ext.List({


fullscreen: true,
title: 'Sencha List Example',
itemTpl: '<div> {Name} {Company} </div>',
store: listStore


, onItemDisclosure: function(record) {


Ext.Ajax.request({

url: 'http://localhost:3909/FileUpload.asmx/TestJSON',
method: 'post',
headers: { 'Content-Type': 'application/json;charset=utf-8' },

success: function(response, request) {
alert('Success: Retrieve response from service..');
alert(response.responseText);
},

failure: function(response, request) {
alert('Error while returing response.. ');
console.log('server-side failure with status code : ' + response.status);
}
});


}
});


var tabPanel = new Ext.TabPanel({
fullscreen: true,
items:[listDemo]
});
}
});

When I run this application, then i am getting the following error -
Uncaught Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server.

But, when I tried to run the application by modifying the URL inside Proxy like this -

, proxy: {

type: 'ajax',
url: 'http://localhost:3909/FileUpload.asmx/TestJSON',
//url: 'http://10.227.87.2/ServiceDemo/Service.asmx?op=TestJSON',


// Ask for Json response
headers: { 'Content-Type': 'application/json;charset=utf-8' },
method: 'GET',
reader: {
type: 'json'
, root: 'd'
}
}

Application is throwing error like -
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

To check whether my application is interacting with web service, i have implemented Ajax Call request inside the onItemDisclosure: function(record) and found that application is able to interact with service properly and returning response which have been converted to JSON format by using headers: { 'Content-Type': 'application/json;charset=utf-8' } inside Ext.Ajax.request.


Service Response.JPG

Any help will be helpful for me.
Please help !!!

Thanks,
Sukanta Ghorui

[tvanzoelen]

Maybe you should post such questions on the Q&A threads.

The difference I see is that your proxy is doing a GET and your Ajax call a POST call to the server.

Mayby your server can not handle the GET and is for that reason throwing a internal server error.

You can specify with actionMethods property in the proxy the POST method. See the docs for the correct use of the proxy.

And if you are doing a crossdomain request with ajax you must use proxytype jsonp wich is a GET method.

[sukanta]

Hi tvanzoelen,

Thanks for your reply.

As suggested, I tried to use actionMethods property in the proxy for the POST method.

But, I am getting the same error as before.

Here is the code -

proxy: {


type: 'ajax'
, url: 'http://localhost:3909/FileUpload.asmx/TestJSON'
, actionMethods: {

read: 'POST'
}
}

Error: Uncaught Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server.

When I included reader property to the proxy, then also I am getting same error.

proxy: {

type: 'ajax'
, url: 'http://localhost:3909/FileUpload.asmx/TestJSON'
, reader: {
type: 'json',
root: 'd'
}
, actionMethods: {
read: 'POST'
}
}

Error: Uncaught Ext.data.JsonReader.getResponseData: Unable to parse JSON returned by Server.

But, if i include headers property, then i used to get the following error -

Code:
proxy: {


type: 'ajax'
, url: 'http://localhost:3909/FileUpload.asmx/TestJSON'
, reader: {
type: 'json',
root: 'd'
}
, actionMethods: {
read: 'POST'
}
, headers: { 'Content-Type': 'application/json;charset=utf-8' }
}

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

Can you please check this and suggest an alternate solution( like - ScriptTag Proxy OR modifying existing Ajax related code which i have implemented) to deal with problem?

Thanks,
Sukanta

[tvanzoelen]

But, when I tried to run the application by modifying the URL inside Proxy like this -

, proxy: {

type: 'ajax',
url: 'http://localhost:3909/FileUpload.asmx/TestJSON',
//url: 'http://10.227.87.2/ServiceDemo/Service.asmx?op=TestJSON',

Maybe you are doing a crossdomain request. Are the server ffrom wich you get the js files the same as
url: 'http://localhost:3909/FileUpload.asmx/TestJSON' ?

If not then try
type: 'jsonp' insteadof type:'ajax' on your proxy

[sukanta]

Hi tvanzoelen,

Thanks for your reply.

For the time being, I am not using crossdomain request. Both the Js file and service are hosted on my local system.
As suggested, I tried to use type: 'jsonp' instead of type:'ajax' on the proxy. But this time it's also throwing error.

Code:
proxy: {


type: 'jsonp'
, url: 'http://localhost:3909/FileUpload.asmx/TestJSON'
, reader: {
type: 'json',
root: 'd'
}
, actionMethods: {
read: 'POST'
}
}

Error:
Uncaught Error: The 'jsonp' type has not been registered with this manager

Please help !!!

Thanks,
Sukanta

[tvanzoelen]

Are your js files loaded from 'http://localhost:3909/
or from
http://10.227.87.2/

if http://10.227.87.2/ change the location of your js files to localhost

if that is not solving the problem, then I don know. I am no touch user but a extjs user

[Swambala]

Plaese refer the below code on how to Populate a Sencha List by calling an ASP.NET Web Service.
I modified the "List.js" in the kitchensink example to fetch the data from the ASP.NET Web Service "ContactsList.asmx".


The "ContactsList.asmx" is here

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;


namespace SwamBalaSenchaTouchASPNet.Services
{
    public class Contact
    {
        public string id;
        public string firstName;
        public string lastName;
        public Contact(){}
        public Contact(string id, string firstName, string lastName)
        {
            this.id = id;
            this.firstName = firstName;
            this.lastName = lastName;
        }
    }


    public class GetContactListResp
    {
        public Boolean success;
        public string message;
        public int total;
        public List<Contact> data;
    }


    /// <summary>
    /// Summary description for List
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class ContactsList : System.Web.Services.WebService
    {


        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
        public GetContactListResp GetContactList()
        {
            List<Contact> ContactList = new List<Contact>();


                            ContactList.Add(new Contact("1", "Julio", "Benesh"));
                            ContactList.Add(new Contact("2", "Julio", "Minich"));
                            ContactList.Add(new Contact("3", "Tania", "Ricco"));
                            ContactList.Add(new Contact("4", "Odessa", "Steuck"));
                            ContactList.Add(new Contact("5", "Nelson", "Raber"));
                            ContactList.Add(new Contact("6", "Tyrone", "Scannell"));
                            ContactList.Add(new Contact("7", "Allan", "Disbrow"));
                            ContactList.Add(new Contact("8", "Cody", "Herrell"));
                            ContactList.Add(new Contact("9", "Julio", "Burgoyne"));
                            ContactList.Add(new Contact("10", "Jessie", "Boedeker"));
                            ContactList.Add(new Contact("11", "Allan", "Leyendecker"));
                            ContactList.Add(new Contact("12", "Javier", "Lockley"));
                            ContactList.Add(new Contact("13", "Guy", "Reasor"));
                            ContactList.Add(new Contact("14", "Jamie", "Brummer"));
                            ContactList.Add(new Contact("15", "Jessie", "Casa"));
                            ContactList.Add(new Contact("16", "Marcie", "Ricca"));
                            ContactList.Add(new Contact("17", "Gay", "Lamoureaux"));
                            ContactList.Add(new Contact("18", "Althea", "Sturtz"));
                            ContactList.Add(new Contact("19", "Kenya", "Morocco"));
                            ContactList.Add(new Contact("20", "Rae", "Pasquariello"));
                            ContactList.Add(new Contact("21", "Ted", "Abundis"));
                            ContactList.Add(new Contact("22", "Jessie", "Schacherer"));
                            ContactList.Add(new Contact("23", "Jamie", "Gleaves"));
                            ContactList.Add(new Contact("24", "Hillary", "Spiva"));
                            ContactList.Add(new Contact("25", "Elinor", "Rockefeller"));
                            ContactList.Add(new Contact("26", "Dona", "Clauss"));
                            ContactList.Add(new Contact("27", "Ashlee", "Kennerly"));
                            ContactList.Add(new Contact("28", "Alana", "Wiersma"));
                            ContactList.Add(new Contact("29", "Kelly", "Holdman"));
                            ContactList.Add(new Contact("30", "Mathew", "Lofthouse"));
                            ContactList.Add(new Contact("31", "Dona", "Tatman"));
                            ContactList.Add(new Contact("32", "Clayton", "Clear"));
                            ContactList.Add(new Contact("33", "Rosalinda", "Urman"));
                            ContactList.Add(new Contact("34", "Cody", "Sayler"));
                            ContactList.Add(new Contact("35", "Odessa", "Averitt"));
                            ContactList.Add(new Contact("36", "Ted", "Poage"));
                            ContactList.Add(new Contact("37", "Penelope", "Gayer"));
                            ContactList.Add(new Contact("38", "Katy", "Bluford"));
                            ContactList.Add(new Contact("39", "Kelly", "Mchargue"));
                            ContactList.Add(new Contact("40", "Kathrine", "Gustavson"));
                            ContactList.Add(new Contact("41", "Kelly", "Hartson"));
                            ContactList.Add(new Contact("42", "Carlene", "Summitt"));
                            ContactList.Add(new Contact("43", "Kathrine", "Vrabel"));
                            ContactList.Add(new Contact("44", "Roxie", "Mcconn"));
                            ContactList.Add(new Contact("45", "Margery", "Pullman"));
                            ContactList.Add(new Contact("46", "Avis", "Bueche"));
                            ContactList.Add(new Contact("47", "Esmeralda", "Katzer"));
                            ContactList.Add(new Contact("48", "Tania", "Belmonte"));
                            ContactList.Add(new Contact("49", "Malinda", "Kwak"));
                            ContactList.Add(new Contact("50", "Tanisha", "Jobin"));
                            ContactList.Add(new Contact("51", "Kelly", "Dziedzic"));
                            ContactList.Add(new Contact("52", "Darren", "Devalle"));
                            ContactList.Add(new Contact("53", "Julio", "Buchannon"));
                            ContactList.Add(new Contact("54", "Darren", "Schreier"));
                            ContactList.Add(new Contact("55", "Jamie", "Pollman"));
                            ContactList.Add(new Contact("56", "Karina", "Pompey"));
                            ContactList.Add(new Contact("57", "Hugh", "Snover"));
                            ContactList.Add(new Contact("58", "Zebra", "Evilias"));
         
            return
            new GetContactListResp
            {
                data = ContactList,
                message = "Selected the Contact List Successfully",
                success = true,
                total = ContactList.Count


            };
        }
    }
}

The modified "List.js" is here

Ext.regModel('Contact', {    fields: ['firstName', 'lastName']
});


Ext.create('Ext.data.Store', {
    id: 'ListStore',
    model: 'Contact',
    sorters: 'firstName',
    getGroupString : function(record) {
        return record.get('firstName')[0];
    },
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url:'../../../Services/ContactsList.asmx/GetContactList',
        headers: {'Content-Type' : 'application/json;charset=utf-8'},
        reader: {
            type: 'json',
            root: 'd.data',
            successProperty: 'd.success',
            totalProperty: 'd.total',
        },
    }
    /*
    // Commenting the below code because store loads the data from the ASP.NET Service
    data: [
        {firstName: 'Julio', lastName: 'Benesh'},
        {firstName: 'Julio', lastName: 'Minich'},
        {firstName: 'Tania', lastName: 'Ricco'},
        {firstName: 'Odessa', lastName: 'Steuck'},
        {firstName: 'Nelson', lastName: 'Raber'},
        {firstName: 'Tyrone', lastName: 'Scannell'},
        {firstName: 'Allan', lastName: 'Disbrow'},
        {firstName: 'Cody', lastName: 'Herrell'},
        {firstName: 'Julio', lastName: 'Burgoyne'},
        {firstName: 'Jessie', lastName: 'Boedeker'},
        {firstName: 'Allan', lastName: 'Leyendecker'},
        {firstName: 'Javier', lastName: 'Lockley'},
        {firstName: 'Guy', lastName: 'Reasor'},
        {firstName: 'Jamie', lastName: 'Brummer'},
        {firstName: 'Jessie', lastName: 'Casa'},
        {firstName: 'Marcie', lastName: 'Ricca'},
        {firstName: 'Gay', lastName: 'Lamoureaux'},
        {firstName: 'Althea', lastName: 'Sturtz'},
        {firstName: 'Kenya', lastName: 'Morocco'},
        {firstName: 'Rae', lastName: 'Pasquariello'},
        {firstName: 'Ted', lastName: 'Abundis'},
        {firstName: 'Jessie', lastName: 'Schacherer'},
        {firstName: 'Jamie', lastName: 'Gleaves'},
        {firstName: 'Hillary', lastName: 'Spiva'},
        {firstName: 'Elinor', lastName: 'Rockefeller'},
        {firstName: 'Dona', lastName: 'Clauss'},
        {firstName: 'Ashlee', lastName: 'Kennerly'},
        {firstName: 'Alana', lastName: 'Wiersma'},
        {firstName: 'Kelly', lastName: 'Holdman'},
        {firstName: 'Mathew', lastName: 'Lofthouse'},
        {firstName: 'Dona', lastName: 'Tatman'},
        {firstName: 'Clayton', lastName: 'Clear'},
        {firstName: 'Rosalinda', lastName: 'Urman'},
        {firstName: 'Cody', lastName: 'Sayler'},
        {firstName: 'Odessa', lastName: 'Averitt'},
        {firstName: 'Ted', lastName: 'Poage'},
        {firstName: 'Penelope', lastName: 'Gayer'},
        {firstName: 'Katy', lastName: 'Bluford'},
        {firstName: 'Kelly', lastName: 'Mchargue'},
        {firstName: 'Kathrine', lastName: 'Gustavson'},
        {firstName: 'Kelly', lastName: 'Hartson'},
        {firstName: 'Carlene', lastName: 'Summitt'},
        {firstName: 'Kathrine', lastName: 'Vrabel'},
        {firstName: 'Roxie', lastName: 'Mcconn'},
        {firstName: 'Margery', lastName: 'Pullman'},
        {firstName: 'Avis', lastName: 'Bueche'},
        {firstName: 'Esmeralda', lastName: 'Katzer'},
        {firstName: 'Tania', lastName: 'Belmonte'},
        {firstName: 'Malinda', lastName: 'Kwak'},
        {firstName: 'Tanisha', lastName: 'Jobin'},
        {firstName: 'Kelly', lastName: 'Dziedzic'},
        {firstName: 'Darren', lastName: 'Devalle'},
        {firstName: 'Julio', lastName: 'Buchannon'},
        {firstName: 'Darren', lastName: 'Schreier'},
        {firstName: 'Jamie', lastName: 'Pollman'},
        {firstName: 'Karina', lastName: 'Pompey'},
        {firstName: 'Hugh', lastName: 'Snover'},
        {firstName: 'Zebra', lastName: 'Evilias'}
    ]*/
});


Ext.define('Swambalasink.view.List', {
    extend: 'Ext.tab.Panel',
    config: {
        activeItem: 2,
        tabBar: {
            docked: 'top',
            layout: {
                pack: 'center'
            }
        },
        items: [{
            title: 'Simple',
            layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
                type: 'vbox',
                align: 'center',
                pack: 'center'
            },
            cls: 'demo-list',
            items: [{
                width: Ext.os.deviceType == 'Phone' ? null : 300,
                height: Ext.os.deviceType == 'Phone' ? null : 500,
                xtype: 'list',
                store: 'ListStore',
                itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
            }]
        }, {
            title: 'Grouped',
            layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
                type: 'vbox',
                align: 'center',
                pack: 'center'
            },
            cls: 'demo-list',
            items: [{
                width: Ext.os.deviceType == 'Phone' ? null : 300,
                height: Ext.os.deviceType == 'Phone' ? null : 500,
                xtype: 'list',
                store: 'ListStore',
                itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
                grouped: true,
                indexBar: true
            }]
        }, {
            title: 'Disclosure',
            layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
                type: 'vbox',
                align: 'center',
                pack: 'center'
            },
            cls: 'demo-list',
            items: [{
                width: Ext.os.deviceType == 'Phone' ? null : 300,
                height: Ext.os.deviceType == 'Phone' ? null : 500,
                xtype: 'list',
                onItemDisclosure: function(record, btn, index) {
                    Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName'), Ext.emptyFn);
                },
                store: 'ListStore', //getRange(0, 9),
                itemTpl: '<div class="contact"><strong>{firstName}</strong> {lastName}</div>'
            }]
        }]
    }
});

Hope this works for you and solves your problem.

[sukanta]

Hi Swambala,


Thanks for your help.


Now the application is able to interact with service and retrieve records while i am using localhost
like - http://localhost:3909/FileUpload.asmx/GetContactList,


But when I hosted the service on some other system which is on the same domain and try to use that service like - http://10.227.87.2/ServiceDemo/Servi...GetContactList, Application is not working and it's always displaying loading and the following error has been reported.


Error:


XMLHttpRequest cannot load http://10.227.87.2/ServiceDemo/Servi...99969&limit=25. Origin http://localhost:3909 is not allowed by Access-Control-Allow-Origin.


One more help:


When user will select any record I want to call one service method and pass one string argument to this method which will return a string value and display it on a label in sencha touch.


Can you please let me know how can I do this ?

Sencha List Code:

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


Ext.regModel('Contact',
{ fields: ['firstName', 'lastName'] });


var ListStore = new Ext.data.Store({


model: 'Contact',
sorters: 'lastName',


getGroupString: function(record) {
return record.get('firstName')[0];
},
autoLoad: true,

proxy: {
type: 'ajax',
url: 'http://10.227.87.2/ServiceDemo/Service.asmx/GetContactList',
headers: {'Content-Type' : 'application/json;charset=utf-8'},
reader: {
type: 'json',
root: 'd.data',
successProperty: 'd.success',
totalProperty: 'd.total'
}
}
});


var list = new Ext.List({
fullscreen: true,
itemTpl: '{firstName} {lastName}',
grouped: true,
store: ListStore
, onItemDisclosure: function(record) {
Ext.Msg.alert('Tap', 'Disclose more info for : ' + record.get('firstName'), Ext.emptyFn);
//Need to call a Service Web method and pass a string argument and display result in a Sencha label
}
});
}
})

Web Service:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public string HelloWorld(string strName)
{
return "Welcome : " + strName ;
}




Thanks,
Sukanta

[sukanta]

Hi,

Can anyone please help me to sort out this issue ?

Thanks & Regards,
Sukanta Ghorui