Implementing AJAX within DotNetNuke

Ready for AJAX within your DotNetNuke Portal?

Overview of AJAX

Ajax which stands for Asynchronous JavaScript and XML is a programming technique that has become quite popular recently in website development.  Its popularity is mostly due to the rich user experience that can be provided as with AJAX you can reduce/eliminate page post backs to the web server and only update the content needed.  Some examples of sites that use Ajax are: gmail.com, flickr.com, and live.com. 

Microsoft realized early on that Ajax was a technology that would become very popular so in September of 2005 they released their first Community Technology Preview (CTP) of the features known as “Atlas”.  “Atlas” was an extension to ASP.NET 2.0 that would allow developers to easily create rich, interactive websites that take advantage of the Ajax technologies.  “Atlas” provided a method for developers to quickly implement Ajax technologies without the need to write heavy JavaScript as “Atlas” took care of it for them.  The advantages of this were very easy to realize. In the beginning “Atlas” had a few simple controls that you could use to implement Ajax the most popular was the “Update Panel” control. This control which is still a key component of the now ASP.NET AJAX 1.0 library allows you to wrap a set of server-side controls and they will then use Ajax to report events, rather than doing a complete post back.

After the success of the “Atlas” CTP program and the Beta and Release Candidate versions Microsoft officially launched ASP.NET Ajax.  This is now the current package that is available and it provides the foundation for all ASP.NET Ajax implementations.  Since the release of version 1.0 Microsoft has also released a toolkit called “ASP.NET Ajax Control Toolkit” which is a further extension of the ASP.NET Ajax 1.0 framework.  The control toolkit provides you with additional controls that help accomplish advanced user interface actions.  Some examples include: Modal Popup, Minimizing Panels, and many other controls. 

AJAX Toolkit Controls

The controls contained within the toolkit are simple server side controls that automatically generate and insert the needed scripting to accomplish their rich client-side display.  This allows developers to simply drag-and-drop controls to a page and allows them to focus on the function/content of a website rather than the specifics of client-side JavaScript implementation. 

The good news for DotNetNuke developers is that Microsoft made it easy for you to use the framework and toolkit and DotNetNuke made it even easier to use in your modules.  When DotNetNuke 4.5.0 was released on April 6^th 2007, support was built in for ASP.NET Ajax allowing developers to quickly use the tools within their modules.  DotNetNuke provides two different methods to implement Ajax in your module; automatic wrapping of a module in an “Update Panel” control, or module specific Ajax implementation.

The first method of DotNetNuke Ajax implementation is very simple.  If you have a control within a created module you can simply modify the module definition for that control and select the “Supports Partial Rendering” option.  For an example below we will walk through the steps necessary to enable partial rendering for the “Documents” module settings page.

1. Login to your DNN site as the host
2. Select “Module Definitions’ from the “Host” menu
   
3. Select “Edit” next to the “Documents” module
   
4. Scroll to the bottom of the next page and select “Edit” next to “Settings”
   
5. Place a checkbox in the “Supports Partial Rendering?” checkbox then click update
   
6. Now, if you view the “Settings” page for the documents module you will notice that when clicking on various items that the changes will simply occur and there is no page flicker or need to re-scroll to your previous location

This method allows you to quickly implement Ajax for your module; however, it has its limitations that might not allow your control to function correctly.  To help provide more robust features DotNetNuke has provided various Ajax specific methods to allow you to have granular control over your module and what controls will use Ajax and which will use the standard post back methods.