ExtJS and .NET Web Services

• Download project and source code - 666.03 KB

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.

// 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 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:

// 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 the obtained information using a 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 element with id set to panel
    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

• 6^th May, 2009: Initial post
• 19^th June, 2009: Added project and source code