Click here to Skip to main content
15,121,230 members
Articles / Web Development / ASP.NET
Posted 6 May 2009


40 bookmarked

ExtJS and .NET Web Services

Rate me:
Please Sign up or sign in to vote.
4.83/5 (17 votes)
19 Jun 2009CPOL2 min read
How to use .NET Web Services in ExtJS


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.


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  
public class Service : System.Web.Services.WebService
    [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

// Create store          
var myStore = new{
    // Load data at once
    autoLoad: true,
    // Override default http proxy settings
    proxy: new{
        // 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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rafal Ziolkowski
Software Developer (Senior) Pareto PPN AS
Norway Norway
Application Developer and Solutions Architect with many skills in programming languages and technolgies. Specializes in Microsoft .NET platform for last 6 years. Additionally Database Developer with wide experience in MySql, Microsoft SqlServer. Specializes in in building Workflow Software using LogicBase Studio from Transparent Logic (Now Altiris Workflow Solution). Lastly improve his skills in software development in Lotus Domino and Sharepoint. His primary goal is to improve skills in building Enterprise Architectures and Project Management.

Comments and Discussions

Questionstill work for Ext JS 4 Pin
lizhong huang26-Nov-13 15:39
Memberlizhong huang26-Nov-13 15:39 
QuestionExtJs Form submit to ashx don't call callback Pin
melnac16-Oct-13 9:33
Membermelnac16-Oct-13 9:33 
Questionvalid for extjs4? Pin
boelenski10-Mar-12 9:25
Memberboelenski10-Mar-12 9:25 
QuestionEnhancement of code? Pin
mahesh__kumar__sharma22-Jan-12 2:12
Membermahesh__kumar__sharma22-Jan-12 2:12 
This is good start for extenstion JS. but i am worried about implement paging, sorting, update, function of grid. Well Thanks. for your nice article Smile | :)
GeneralMy vote of 5 Pin
Juan Gabriel Herrera M.31-Aug-10 5:54
MemberJuan Gabriel Herrera M.31-Aug-10 5:54 
GeneralNice Article Pin
Daniel Cardillo23-Jul-09 19:18
MemberDaniel Cardillo23-Jul-09 19:18 
GeneralRe: Nice Article Pin
Rafal Ziolkowski30-Jul-09 6:41
MemberRafal Ziolkowski30-Jul-09 6:41 
GeneralWeb Service parameters Pin
Member 145866020-Jun-09 2:04
MemberMember 145866020-Jun-09 2:04 
GeneralRe: Web Service parameters Pin
Rafal Ziolkowski22-Jun-09 12:45
MemberRafal Ziolkowski22-Jun-09 12:45 
GeneralRe: Web Service parameters Pin
bryancu44-Sep-09 1:26
Memberbryancu44-Sep-09 1:26 
Question2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Dav Zen11-Jun-09 15:01
MemberDav Zen11-Jun-09 15:01 
AnswerRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Rafal Ziolkowski11-Jun-09 20:14
MemberRafal Ziolkowski11-Jun-09 20:14 
GeneralRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Dav Zen12-Jun-09 3:29
MemberDav Zen12-Jun-09 3:29 
GeneralRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Rafal Ziolkowski12-Jun-09 3:43
MemberRafal Ziolkowski12-Jun-09 3:43 
GeneralRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Dav Zen12-Jun-09 4:05
MemberDav Zen12-Jun-09 4:05 
GeneralRe: 2 yuigrid with 2 datasource in the same page doesn't work ! Pin
Rafal Ziolkowski12-Jun-09 4:26
MemberRafal Ziolkowski12-Jun-09 4:26 
GeneralNeed Code Solution Pin
syedalinaqashika786vi8-Jun-09 12:16
Membersyedalinaqashika786vi8-Jun-09 12:16 
GeneralRe: Need Code Solution Pin
Rafal Ziolkowski10-Jun-09 3:00
MemberRafal Ziolkowski10-Jun-09 3:00 
GeneralRe: Need Code Solution Pin
syedalinaqashika786vi18-Jun-09 9:15
Membersyedalinaqashika786vi18-Jun-09 9:15 
GeneralUseHttpGet Pin
reneesong3-Jun-09 12:38
Memberreneesong3-Jun-09 12:38 
GeneralRe: UseHttpGet Pin
Rafal Ziolkowski3-Jun-09 21:42
MemberRafal Ziolkowski3-Jun-09 21:42 
GeneralRe: UseHttpGet Pin
reneesong9-Jun-09 9:38
Memberreneesong9-Jun-09 9:38 
GeneralRe: UseHttpGet Pin
Rafal Ziolkowski10-Jun-09 3:10
MemberRafal Ziolkowski10-Jun-09 3:10 
GeneralRe: UseHttpGet Pin
Member 221258119-Mar-11 7:24
MemberMember 221258119-Mar-11 7:24 
GeneralNice Pin
Jeff Circeo11-May-09 17:13
MemberJeff Circeo11-May-09 17:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.