PDA

View Full Version : Binding grid using ASP.Net Web Service.



KnowledgeSeeker
7 Nov 2013, 4:46 AM
Hi all,
I am using the example http://docs.sencha.com/extjs/4.2.2/#!/guide/application_architecture to bind grid but instead of populating the records inline I want to use ASP.Net Web Service. I changed only store.js, rest of the code shown in the example above is as it is. But I can only see the headers of the grid. There is no data. Here is my Web Service code:


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

/// <summary>
/// Summary description for StoreWebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// 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 StoreWebService : System.Web.Services.WebService
{
public StoreWebService()
{
}

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public ArrayList GetEmployees()
{
ArrayList Employee = new ArrayList();
Employee.Add(new Employees("1", "Ed", "ed@sencha.com"));
Employee.Add(new Employees("2", "Tommy", "tommy@sencha.com"));
return Employee;
}
public class Employees
{
string ID;
string UserName;
string EMailID;

public Employees() { }
public Employees(string _ID, string _name, string _email)
{
this.ID = _ID;
this.UserName = _name;
this.EMailID = _email;
}
}
}



and here is the code for store.js:


Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'StoreWebService.asmx/GetEmployees',
headers: { 'Content-type': 'application/json' },
fields: ['ID', 'UserName', 'EMailID']
}
});

Can anyone tell me what am I missing?

Thanks.

evant
7 Nov 2013, 5:11 AM
1) You shouldn't be using a JSONP proxy, not sure why you decided to pick that one. You need to use an ajax proxy.

2) Fields don't go on the proxy, though it doesn't really matter in this case.

KnowledgeSeeker
7 Nov 2013, 5:16 AM
Thanks for the reply. I replaced 'JSONP' with 'ajax'. Also tried removing fields: ['ID', 'UserName', 'EMailID'] but still it is not working.

evant
7 Nov 2013, 5:19 AM
What debugging have you done? Does your server respond with any data, if so, what? What does the model definition on the JS side look like? Where is your grid configuration?

KnowledgeSeeker
7 Nov 2013, 6:41 AM
I have tested the service, it is returning result. I will post the code here.
Controller:

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],
stores: ['Users'],
models: ['User'],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},

onPanelRendered: function () {
console.log('The panel was rendered');
}
});
Model:


Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['ID', 'UserName', 'EMailID']
});

Store:

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'WebServiceMain.asmx/GetEmployees',
headers: { 'Content-type': 'application/json' },
fields: ['ID', 'UserName', 'EMailID']
}
});
View:

Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function () {
this.columns = [
{ header: 'ID', dataIndex: 'ID', flex: 1 },
{ header: 'Name', dataIndex: 'UserName', flex: 1 },
{ header: 'Email', dataIndex: 'EMailID', flex: 1 }
];
this.callParent(arguments);
}
});
App.js that is included on Default.aspx

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="DefaultHead" runat="server">
<title>ISAAC-Import Systems And Account Configuration</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<form id="DefaultForm" runat="server">
<asp:ScriptManager ID="ScriptManagerDefault" runat="server">
<Services>
<asp:ServiceReference Path="WebServiceMain.asmx" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

evant
7 Nov 2013, 12:42 PM
Yes, but what does your service return? I don't need to see the code, just the output. Are you sure the call is made to the server? Can you see it in Firebug/Dev tools?

KnowledgeSeeker
7 Nov 2013, 9:05 PM
Here is the response:


{"d":[{"ID":"1","UserName":"Ed","EMailID":"ed@sencha.com"},{"ID":"2","UserName":"Tommy","EMailID":"tommy@sencha.com"}]}

And this is the JSON returned:






[Object { ID="1", UserName="Ed", EMailID="ed@sencha.com"}, Object { ID="2", UserName="Tommy", EMailID="tommy@sencha.com"}]

KnowledgeSeeker
7 Nov 2013, 11:02 PM
I changed the store's code to:

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'WebServiceMain.asmx/GetEmployees',
reader: {
type: 'json',
root: 'd'
},
headers: { 'Content-type': 'application/json' },
fields: ['ID', 'UserName', 'EMailID']
}
}); and it worked!

Thanks a lot :)