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.
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).
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:
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:
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
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:
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.
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.
Hopefully this is gives a useful insight into the world beyond ASP.NET.