Introduction
ExtJS is a very powerful JavaScript library, perfect for creating rich graphical user interfaces in a web browser. You can make applications for many purposes and integrate data from many sources and technologies using XML, JSON, or your own interchange format. On the other hand, .NET provides great server side features like Entity Framework, LINQ, and many powerful classes. In this article, I would like to show you how to integrate both technologies in the most convenient way and use the 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 solutions accessible by many suppliers using different technologies. When we decided to use ExtJS as the GUI part and ASP.NET as the server part, it was ideal to use ASP.NET Web Services directly. Natively, ExtJS does not support SOAP XML data sources. You can write your own data proxy if you like, but I will show you that it is not necessary. ASP.NET Web Services, 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 the behavior of .NET classes, you can use attributes. Here, we need to decorate the Web Service class with the ScriptService
attribute (from the System.Web.Script.Services
namespace), and then decorate methods with the ScriptMethod
attribute. The class attribute does not need any configuration, but we have to add some to the method decorator. All we need to specify is the method response format, in this case ResponseFormat=ResponseFormat.Json
, and allow it to talk to the Web Service method using GET HTTP method. That is all we need on the server side. Let's go then to the GUI part.
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;
}
}
...
[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 Web Service will produce a data structure looking like this:
{ "d": [{"AgentID": 1, "FirstName": "Jelena",
"LastName": "Akerhus"},{"AgentID": 2,
"FirstName": "Londo", "LastName": "Molari"}]}
We can access this data using a JSON enabled data store in ExtJS, called Ext.data.JsonStore
:
var myStore = new Ext.data.JsonStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetAgents',
headers: {'Content-type': 'application/json'}
}),
root: 'd',
id: 'AgentID',
fields: ['AgentID', 'FirstName', 'LastName']
});
And, show the obtained information using a data grid:
var grid = new Ext.grid.GridPanel({
store: myStore,
columns: [
{ dataIndex: 'AgentID' },
{ dataIndex: 'FirstName' },
{ dataIndex: 'LastName' }
],
renderTo: 'panel'
});
In this scenario, we have obtained data from an ASP.NET Web Service and showed it in an ExtJS data grid. This approach has one big disadvantage: the Web Service has to be located within the same domain. In the next article, I will show you how to perform a cross domain call from ExtJS to an ASP.NET Web Service in simple steps.
History
- 6th May, 2009: Initial post
- 19th June, 2009: Added project and source code