In the following I will write about several hot topics covered in this referenced session presented by Stephen Walther, describing how to take advantage of the latest features of the ASP.NET AJAX framework introduced with .NET 3.5 Service Pack 1.
Anyone who works with AJAX applications, knows that as soon as an asynchronous postback is triggered the behavior of the browser is broken. An important functionality is the bookmark of the pages, which is no longer possible with AJAX applications. Boy, I have good news for you! The big boys at Microsoft provide now several ways of accomplishing to bookmark a page in an AJAX application.
- Server-side browser history
By enabling this new feature with the EnableHistory=true property of the ScriptManager, it will detect when the URL is changed and it will add a history point which will be later used for the browser history. How is this done in the background? In Internet Explorer it renders out a little secret iframe to keep the browser history. This iframe is updated every time the user moves to another page. In Firefox, it pulls the changes in the hash value of the URL.
Once it is enabled, the developer has to create an event handler of the ScriptManager’s OnNavigate event. This event is raised every time the user changes the URL by clicking on the Back or Forward button, picking out a history point or opening a bookmarked page.
Whenever there is a significant point in history which you would like to record, you have to call the ScriptManager’s AddHistoryPoint so that it can remember that particular page and recreate the state. To recreate the state, the developer takes advantage of the OnNavigate event which is automatically raised on server-side when the user comes back to the page.
The AddHistoryPoint has 3 overloads, including one which provides a parameter for the browser title. By setting this title, the developer can give intuitive titles to the webpages, which will be shown in the history or in the bookmark list, instead of the actual URL. This will give a better user experience.
- Client-side browser history
The client-side API is very related to the server-side one. You can accomplish the same functionality by using the client-side Sys.Application.addHistoryPoint() method to add value representing the state to browser history and Sys.Application.add_navigate() event to recreate the state from the previously added value.
- IE8 browser history
If you are absolutely sure that your users are going to surf through your application only with IE8, for example in an intranet web application, this browser offers you a new feature called Ajax Navigation. This functionality accomplishes all what we talked about previously regarding the server or client-side browser history. All you have to do is set the page to IE8 mode, <meta content=”IE=8″ http-equiv=”X-UA-Compatible”>.Then add value representing state to browser history by using the window.location.hash property and handle the recreation of state from value by implementing a handler for the window.hashchange event.
If your application is used in various browsers, you can always choose between the server or client-side browser history approach.
So why would you want to use jQuery?
Well, this library is highly cross-browser compatible and CSS3 compliant, it has a lightweight footprint of 15Kb. The main philosophy of jQuery is to keep things small, keep the initial load of the page down by having the library’s size small which needs to be loaded when your user first comes to your website. The basic idea behind this small footprint is to have a small core framework easily and quickly loadable but to have a big environment to create plug-ins for extending the framework. So another benefit of jQuery is that it has a huge community of plug-ins ready to be used. And last but not least, it is fully extendible, even you can create plug-ins for jQuery.
What kinds of features does it add to the existing ASP.NET AJAX?
Another nice feature of jQuery is animations. In ASP.NET AJAX applications we have background postbacks and no browser progressbar support so it is difficult for the user to recognize when the server is in process mode, unless we give them some visual feedback. To create a good user experience in AJAX applications, we can take advantage of the jQuery animations. The basic set of animations out of the box are the followings:
Other nice visual effects can be accomplished by using the plug-ins of jQuery, for example the jQuery UI plug-in providing additional 30 animations.
Further more, jQuery provides IE8 specific Selectors API. You can use it by simply setting the page into IE8 mode, <meta content=”IE=8″ http-equiv=”X-UA-Compatible”>. Then you can use the document.querySelector() method to retrieve the first element that matches the selector and the document.querySelectorAll() method to retrieve all elements that match the selector. So if your users are using strictly IE8, you can take advantage of the built-in feature of IE8 jQuery selectors API to provide a really fast and efficient user experience.
How does jQuery fit in with Microsoft?
- The Microsoft and the jQuery team have been working together to provide full annotation for jQuery so now jQuery has full Intellisense support.
- Microsoft is releasing jQuery under the MIT license.
- Microsoft is integrating jQuery into their products without actually modifying jQuery: the future versions of Visual Studio, ASP.NET MVC (jQuery is shipped now with its beta version), the next version of WebForms.
- Microsoft will provide 7/24 full product support for jQuery.
There are two big enemies of Ajax Performance, namely:
- The network latency, meaning the amount of time needed to initiate the download.
When using script combining, it is recommendable to use the Script Reference Profiler web control, which analyses the page for the currently referenced scripts and automatically writes them out for easy combining within the ScriptManager.
To use script combining, all you have to do is list your script to be combined in the CompositeScript of the ScriptManager:
1: <asp:ScriptManager runat="server"> 2: <CompositeScript> 3: <Scripts> 4: <asp:ScriptReference Path="~/Scripts/Script1.js" /> 5: <asp:ScriptReference Path="~/Scripts/Script2.js" /> 6: <asp:ScriptReference Path="~/Scripts/Script3.js" /> 7: </Scripts> 8: </CompositeScript> 9: </asp:ScriptManager>
Then behind the scenes the server will automatically combine them for you and send them out.
Let’s take a look at the performance of loading a webpage containing the AJAX Control Toolkit, which requires a lot if scripts to be downloaded, with and without script combining.
The first test without script combining took about 15 seconds to finish. Notice that downloading of the scripts is performed one after the other, thus having the stair-step style graphic in FireBug:
Additionally, this tool analyses your web pages from a performance perspective and lists the specific changes to be made for improvement.
- WUX402 – ASP.NET AJAX Tips and Tricks by Stephen Walther
- Official Microsoft website for tutorials, videos, and sample code for ASP.NET AJAX
- Stephen Walther’s Blog
- ASP.NET AJAX Program Manager’s Blog
- jQuery Plugin Repository