I was playing around with the VS 2010 Beta 2 training kit and came across the new ASP.NET Ajax 4.0. A lot of interesting stuff there, but a killer feature is how Ajax now gives you the ability to minimize the request and response size.

See prior to 4.0, Ajax most famous control was the UpdatePanel. Granted, that is a great control and used heavily; it still lacked the true heart and soul of pure client-side Ajax. UpdatePanel kept both data processing and HTML rendering at the server. This caused that each page post was actually a full post with a full page life cycle and the viewstate rendered was still fairly large.

Now in 4.0, Ajax improves on the idea of client-side templates. That is moving the responsibility of HTML generation to the client and thus giving the server only the mission of data processing. This results in smaller request size and smaller viewstate in the response.

If you already have the 2010 beta 2 training kit installed, you will find the following solution:

[installation path]\Demos\AspNetAjax10in1\Source\AjaxApplication.sln

This is a really great source to start learning about Ajax 4.0, but I want to show you how the page size is reduced:

The page “1_ServerSideAjax.aspx” is a traditional Ajax page. It uses the UpdatePanel to partially load a set of data based on an item selection of a dropdown list. Run this page and change the item selected as follows:

Great, now view the source of the page and take note of the view state:

That is a lot of viewstate!

Now similarly run page “2_ClientSideAjax.aspx” and select the same item. View the source and take a note of the viewstate:

See how much the viewstate is reduced! This is amazing. The difference is that in Ajax 4.0 you can define client templates and use new client controls like the DataView control (not to be confused with the ADO.NET DataView). Now the request to the server is issued to a web service which returns result in the Javascript Object Notation (JSON) format. The result data is then de-serialized and bound to the client control. This idea of keeping the rendering responsibility on the client while getting only the data from the server, greatly reduces both request and response viewstate size.

Let’s have a look at how this is implemented. Open the “2_ClientSideAjax.aspx” page and notice the following line:

movieView = $create(Sys.UI.DataView, {}, {}, {}, $get(“movieBody”));

The $create function of the Ajax Sys library created a new client control; this control is of type Sys.UI.DataView. Also the $get function acts as a shortcut for the getElementById function to get the movieBody template which is defined in the page as follows:

{{ Title }}{{ Director }}{{ DateReleased.localeFormat(“D”) }}

“Title”, “Director”, and “DateReleased” are binding fields which will be returned by the JSON response of the web service. The below line calls the web service:

AjaxApplication.Services.MovieService.GetMovies(categoryId, showMoviesComplete);

If you are like me and would want to examine things behind the scenes, open your favorite network monitoring tool – such as Fiddler and examine the traffic. You will see for example that the request and response for the page using the UpdatePanel:

Now examine the request and response for the page using Ajax 4.0:

Notice any difference!!