So in my last post I looked at how to use an UpdatePanel to do data paging and then optimising the HTML to get the best performance from our requests, but it still wasn't optimal.
Although we can optimise the UpdatePanel response we can't do much about the request, and especially with regards to the ViewState within a page, which is the real killer.
This is when we turn to doing client-side paging using client-side templates. This concept is basically the same as what we're familiar with for the ListView and Repeater ASP.NET controls, but they operate entirely in JavaScript using JSON object collections.
There's plenty of ways to go about client-side templating, you can write your own templating engine, it's not hard, I had a crack at it and wrote a client-side repeater which consumed data from a webservice in only a few hours.
Or you can use any of the premade template engines. I'm a fan of the jQuery plugin, jTemplates or you can use the templating engine which is part of Preview 1 of the Microsoft AJAX 4.0 library.
Lets have a look at both.
Setting up the WebSerivce
Well the first thing we need is to be able to get the data, so we'll create some webservices and set them up for JSON transmission on the data.
You'll notice there's 2 services, one for the returning of the People collection in a paged format, thanks to some lovely LINQ extensions, and one to get the total number in the collection (which we'll look at later).
Using jTemplates
Now we need to set up our client side template, jTemplates has its own expression format which is very similar to using an ASP.NET repeater, and it has lots of really nice inbuilt features for executing more functions when the template is being executed. I'm only going to be using a very basic features of jTemplates. Here's the template I've created for the example:
(Click for larger version)
So theres our template, now we need to implement it. We'll use jQuery to do our AJAX requests on the initial page load, and then all subsiquent requests:
I've got a few global variables which will be used in the various locations within the JavaScript to maintain our page position.
The getPeople method will handle the AJAX request and then I have a separate load method in the form of loadPeople. getPeople will be used when ever we want to refresh the pages data. When doing the AJAX request we need to pass in parameters the webservice requires. It's best to check out the jQuery documentation for how the various properties on the $.ajax function operates.
The loadPeople is where we actually create the client template instance and load the data into it.
Yes, it's that simple to create a client template. Because the result is in JSON we don't need to worry about any kind of conversion.
Now we have the client template displaying the data we need to have to work on the paging. First we need to know how many pages to make, so it's time to use the GetPeopleCount webservice
The loadPaging method is used to output our result and then the paging itself is set up. I've also got a few methods which are then used for the next and previous buttons:
Just to make it a bit cleaner I'm also disabling the buttons when they are not required.
Well now that this is all set up, how does it perform? Well I'll just let the pictures do the talking
(Click for larger version)
I'm sure you can deduce from the above that it was much more efficient. We've got a much smaller page load, and then the request is only a fraction of what the UpdatePanel one is!
And we don't have the problem of submitting the ViewState either!
Microsoft AJAX 4.0 Preview 1
So I'll just look at this briefly, first off we need to define our template:
(Click for larger version)
I really like this template engine of jTemplates, it's much simpler (but evidently less powerful) to implement, there's no really wierd syntax needing to be remembered. The only wierdness is that the template much be a class named sys-template so the engine knows to now display it.
As can be seen above the JavaScript is also fairly easy to work with. In the Microsoft AJAX format you define the control then use a pesudo-accessor to add the data and then invoking a render.
Very much like a .NET DataBinder control.
I wont bother showing the request/ response info as they are virtually identical to what was seen in the jTemplates example.
Conclusion
So now all our paging needs should be statisfied. We've seen standard UpdatePanel implementations, then made them as optimised as possible. And to finish it off we looked at doing it using JavaScript entirely (well, for display purposes it's entirely done :P).
Hopefully this is gives a useful insight into the world beyond ASP.NET.
And to wrap it all up here's the sample project to play with yourself.