ExtJS and .NET WebServices

Introduction

ExtJS is very powerful JavaScript library, perfect for creating rich graphical user interface in web browser. You can make applications of many purposes and integrate data from many sources and technologies using XML, JSON or own interchange format. On the other hand .NET provides great server side features like entity framework, Linq and many more powerful classes. In this article I would like to show You how to integrate both technologies in the most convenient way and use strengths from both of them.

Solution

When You are trying to access different data sources on different servers, the best way in today's world is to use web services. In this way You can build SOA solution, accessible by many suppliers using different technologies. When we have decided to use ExtJS as GUI part and ASP.NET as server part, it would be ideally to use ASP.NET web services directly. Natively ExtJS does not support SOAP XML data source. You can write own data proxy if You like, but I will show You that it is not necessary. ASP.NET webservices, starting from version 2.0 allows You to talk in JSON format instead of SOAP XML.

Like in most cases, when You want to configure behavior of .NET classes You can use attributes. In this we need to decorate web service class with ScriptService attribute (form System.Web.Script.Services namespace), and then decorate methods with ScriptMethod attribute. Class attribute does not need any configuration, but we have to add some to method decorator also. All we need to specify is method response format, in this case ResponseFormat=ResponseFormat.Json and allow to talk to web service method using GET HTTP method. That is all we need on server side, let's go then to GUI part.


// Entity class declaration
public class Agent {
private int _agentID;
public int AgentID { get { return _agentID; } set { _agentID = value; } }
private string _firstName;
public string FirstName { get { return _firstName; } set { _firstName= value; } }
private string _lastName;
public string LastName { get { return _lastName; } set { _lastName= value; } }

public Agent() {}
public Agent(int agentID, string firstName, string lastName) {
_agentID = agentID;
_firstName= firstName;
_lastName= lastName;
}
}

...

// WebService declaration
[ScriptService]
public class Service : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public List<Agent> GetAgents() {
List<Agent> agents = new List<Agent>();
agents.Add( new Agent('1', 'Jelena', 'Akerhus') );
agents.Add( new Agent('2', 'Londo', 'Molari') );

return agents;
}
}


This WebService will produce data structure looking like this:

{ "d": [{"AgentID": 1, "FirstName": "Jelena", "LastName": "Akerhus"},{"AgentID": 2, "FirstName": "Londo", "LastName": "Molari"}]}


We can access this data using json enabled data store in ExtJS, called Ext.data.JsonStore:

// Create store
var myStore = new Ext.data.JsonStore({
// Load data at once
autoLoad: true,
// Override default http proxy settings
proxy: new Ext.data.HttpProxy({
// Call web service method using GET syntax
url: 'Service.asmx/GetAgents',
// Ask for Json response
headers: {'Content-type': 'application/json'}
}),
// Root variable
root: 'd',
// Record identifier
id: 'AgentID',
// Fields declaration
fields: ['AgentID', 'FirstName', 'LastName']
});


And show obtained information using data grid:

var grid = new Ext.grid.GridPanel({
// Set store
store: myStore,
// Columns definition
columns: [
{ dataIndex: 'AgentID' },
{ dataIndex: 'FirstName' },
{ dataIndex: 'LastName' }
],
// Render grid to dom elemnent with id set to panel
renderTo: 'panel'
});

In this scenario we have obtained data from ASP.NET WebService and show it in ExtJS data grid. This approach has one big disadvantage: WebService have to be located within the same domain. In the next article I will show You how to perform Cross domain call from ExtJS to ASP.NET web service in simple steps.

14 comments:

Hi Rafal,

it's very useful about "EXTJS and .Net web servicers" article, but still we are awaiting for your next related article for "how to consume the same .net webservice in cross-domain" using extjs. If you have any intermediate ideas please post it.

Regards
Srinivasan

June 08, 2009  

Hi Srinivasan,

Idea is done, now I need to describe this.

Post is on the way hang in there :)

Regards,
Rafal

June 12, 2009  

This comment has been removed by a blog administrator.

July 13, 2009  

Do you have an example of connecting a ExtJS form to fields in a Sharepoint List record?

November 03, 2009  

No, unfortunately not. Have You tried ExtJS forum? They are pretty active, I am pretty sure You will find there someone with experience with Sharepoint&ExtJS.

Regards,
Rafal

November 04, 2009  

Hi Rafal,
Thanks for this nice article, can you give me any idea how to use asp.net PageMethod with extjs.

I use PageMethod with jquery but cant in extjs.

like this in jquery<
jQuery.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: '{}',
dataType: 'json',
url: 'MyPage.aspx/SomePageMethod',
success: function(result){
alert(result);
}
});

Here MyPage.aspx holds the SomePageMethod and also contains the jquery code.

Scriptmanager is not required for this.Is it possible in ExtJs?

Thanks

March 02, 2010  

@Ashan, You may find idea here:

http://ziuek.blogspot.com/2009/07/extjs-and-net-webservice-remote-domain.html

November 27, 2010  

It was the very nice blog on the other hand .NET provides great server side features like entity framework, Linq and many more powerful classes.
Hire PHP developer

December 22, 2010  

Nice website with good information and I am pleased to have read some of them on your blog.
web design company

October 31, 2011  

This is an excellent blog because it has good volume of information, everything is described in the simplest manner and all information on this blog is genuine and real.
Shopping Cart Software

November 22, 2011  

Thank you for posting such a useful, impressive.your blog is so beautiful. you have give me great news.

Website Design Company Bangalore
SEO Company Bangalore

September 07, 2013  

it's very useful about EXTJS and .Net web servicers article, If you have any intermediate ideas please post it.

Web design company Hydderabad

April 14, 2015  

Hi. Nice post. I am wondering if it is possible. saisantosh

technologies is providing the best seo company in

hyderabad

October 01, 2015  

Looks this is a wonderfully architectural weblog well designed . Only unique web designing company in hyderabad can design similar sites or sites with a genuine layout that no othe companies can design.

February 24, 2016  

Newer Post Older Post Home