In the last 2 month I have completed 2 project using AJAX. Both project required integration into external systems, the one into AccPac, and the other into Oasis, a sample management system based on FirebirdSQL and  TCP/IP communication with a third party service. Both project were written in C# and ASP.Net 2.0. I have been suitable impressed with the power of AJAX and the various ways it can be implemented into a website. Website interfaces are finally becoming as powerful as their Windows counterparts, allowing interactive and quick interfaces. For this post I briefly want to cover the components of AJAX I have been utilizing and my thoughts on each.

The AJAX Controls

Surprisingly the AJAX itself only consists of 2 controls, an ASP.Net UpdatePanel and a ScriptManager. It also provide a UpdateProgress Control for interactive feedback during AJAX processing. The power of AJAX lies in the way these are configured and used within a web page. Both sites I converted utilize MasterPages, and I found the best method for integration to be placing the ScriptManager inside the Master, while utilizing a ScriptManagerProxy along with the UpdatePanel inside the content pages. The concept of MasterPages is definitely something I want to cover in future, as it is possibly one of many powerful features of ASP.Net 2.0, especially when used along with well built CSS Stylesheets. The AJAX Framework can be downloaded here.

The ScriptManager Control

This is the heart of AJAX. The ScriptManager contains all the client side scripts utilized by AJAX to render controls and code client-side instead of on the server directly. To utilize any of the AJAX controls in ASP.Net the containing page needs one ScriptManager control, and in the case of MasterPages, this control can be placed inside the MasterPage itself. A convenient extension to the ScriptManager is the ScriptManagerProxy control which allows content pages to utilize the already defined ScriptManager inside the MasterPage.

The ScriptManager allows developers to handle various events that are fired when AJAX is in use, including the ability to do exception handling, asynchronous call-backs and even implement custom scripts. Details about the ScriptManager is well documented here.

The UpdatePanel Control

This control is what makes AJAX work. My approach in designing or implementing AJAX has been extremely simple. First develop the page working, using the standard ASP.Net Controls and PostBacks. At this stage ensure that everything on the page is working, including all PostBack code and event handlers. Once the page is working 100%, split the page into logical section or groups. My rule of thumb is to keep each grid inside it's own UpdatePanel, with any forms inside another. Filters and Search Selection also have their own UpdatePanels. The reason for this is that the true power of AJAX is only seen when the UpdateMode of the the UpdatePanel is set to Conditional. With this set only the content of the Panel itself will be sent to and from the server, instead of the complete page. By logically breaking down the UpdatePanels, the amount of traffic is significantly reduced and allows for a powerful and extremely interactive web page. Details about the various properties and methods of the UpdatePanel can be found here.

At this point I would like to point out that I have noticed a trend among developers to wrap complete pages in UpdatePanels, or even to wrap the whole Content Section of a MasterPage within one. This does not offer any improvement over standard PostBacks, as the complete content of the content sections will still be sent to the server. Avoid this practice. Plan your AJAX implementation on a per page basis, since certain parts of pages does not always require AJAX. A good example is a form that doesn't require any PostBacks, and utilize the UpdatePanel around the Submit Buttons to improve the overall page performance.

The UpdateProgress Control

This control provides the eye candy all developers love. By adding an UpdateProgress Control to a page and linking it to a specific UpdatePanel, Please Wait... messages can be displayed to the user while the page is being processed. There is not much more to mention about this control, however correctly applying it to a control provides a professional look to any search or processing events that may fire during the execution of a page.

Conclusion

I have been absolutely impressed at the ease and simplicity around implementing AJAX into existing web pages. As part of the Tutorial Centre, which I will be updating again shortly, will include the implementation of AJAX. My only concern is abuse of the technology, something I have already seen among developers. Like all aspect of Web Design and Web Application development, the simple rule of less is more should always apply, and I urge anyone implementing AJAX to plan the implementation carefully. A well planned AJAX implementation can truly prove to be a powerful asset in any web projects, pushing it into the new age with style and professionalism which could previously only be achieved through lines of JavaScript, lot's of Flash or a Windows Application.