Returning data from ASP.net to an ExtJS Grid

I’ve been given a prototype/mockup of a grid written in html and javascript (via ExtJS) that I now need to implement within an ASP.net web application. Does anyone have any pointers as to how to pass data to the grid (to a GroupingStore, specifically).

I’d rather not have a proliferation of web services or helper pages returning XML/JSON so if there’s a way to use Client callbacks or Page Methods (Can’t you tell I’m not particularly familiar with either – buzzword bingo!) or somesuch, that would be preferred.

Please, no recommendations that I use jQuery, the built-in ASP.net grid, or any other UI framework. The use of the ExtJS grid has been mandated by the powers that be, so that’s the grid I’m using, for better or worse 🙂

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I believe a service that simply returns json structures for your pages is the best option, nicely abstracted and reusable across the application rather than page methods.

Method 2

Here’s a low tech solution. It doesn’t require use of web services or any other additional technologies.

Step 1

Have an ASPX page that takes one paramter, and invoked like this:

http://mysite.com/query.aspx?sql=select * from orders where status = 'open'

Step 2

In the code behind, do something like this

void Page_Load(object sender, EventArgs e)
{
   Response.ContentType="text/json"; 
   DataTable contents = ExecuteDataTable(Request["sql"]);
   Response.Write( JRockSerialize( contents ) );
   Response.End();
}

You can use JRock for serializing a data table to JSON.
IMHO this gives the cleanest JSON.

So that’s getting DataTable to JSON sorted…

WARNING: This is obviously a simplistic example. You shouldn’t pass SQL on the query string as it is not secure (your could use named queries and parameters instead).

Step 3

In your ExtJS code, create a grid with Json datastore as shown in this Ext example. Set the data store url: to that of your query.aspx page with appropriate query string parameters.

You’ll also need to set the columns up for the grid, again shown in the ExtJs example.

Alternatively…

I was really impressed when I looked at the Coolite samples recently. They are an ExtJS partner and provide a good ASP.NET & ExtJS experience. And no, I don’t work for them 🙂 I haven’t tried their grid, but it might be painless (at a price).

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0