Introducing ASP.NET AJAX Framework plus Toolkit, part 1
AJAX is a very popular term these days; it seems like everything you see in the development realm has the word AJAX attached to it. The .NET framework has AJAX, custom component frameworks have AJAX, Google and other search engines use AJAX. It's a very big buzzword these days. I wouldn't be surprised if you hear of AJAX-enabled chainsaws (something like the Y2K compliant chainsaws once offered on television). But what are the ASP.NET AJAX extensions all about? That is what this article will touch upon.
The ASP.NET AJAX extensions, first offered with ASP.NET 2.0 and now embedded with the .NET framework 3.5, offer a more rich-client user interface in applications. Along with the AJAX Control Toolkit, which is a separate download, these features provide not only a set of server controls and server control extenders that highly make use of AJAX, they offer a client API that can be used to develop custom extenders and controls in a managed approach.
Before we touch upon the AJAX client library, I want to talk about the AJAX framework and the toolkit. The ASP.NET AJAX framework provides a base framework for developing ASP.NET controls and control extenders, as well as containing an ExtenderControl class that can be used to create custom components. Furthermore, the AJAX Control Toolkit builds on this by providing another level of inheritance into making custom development easier. I'm not going to touch on custom AJAX development, but will defer this to another time.
I wanted to go into the usability of the framework, as well as the AJAX Control Toolkit. First and foremost, the ASP.NET AJAX framework has one of the greatest features when using ASP.NET: the update panel. This panel posts its contents back to the server asynchronously, preventing the page from fully posting back. Most of the times you will use this, it will work very well; everything happens on the fly. All you have to do is define an update panel as below. In addition, it's possible to create triggers that respond to events raised by server controls. This works when the UpdateMode is set to Conditional, rather than Always (which means every control that fires an event within it causes an asynchronous postback).
<asp:UpdatePanel id="pnl" runat=”server”> <ContentTemplate> <!-- My Inner Server Controls --> </ContentTemplate> </asp:UpdatePanel>
Though update panels are usually a pretty good approach for developing rich applications, there can be some drawbacks. For instance, when the page posts back asynchronously, the entire page refreshes its update panels. There are solutions out on the web for this, but nothing out-of-the-box. In addition, some controls, like the RadioButtonList, pose challenges in how it renders and invokes postbacks. Because this control renders each item as a radio button with its own ID and postback mechanism, the asynchronous postback didn't work.
ASP.NET AJAX also created a series of client-side objects that you can use in your AJAX components. The goal was to create a client-side version of the .NET framework, at least as much as possible. Microsoft created ways to register classes, interfaces, and namespaces. They created levels of inheritance (Sys.Component, Sys.Control) and provide a series of helper methods and objects to develop client-side components with. Exceptions can be thrown, types can be checked, and text can be parsed, like you can in the .NET framework. It’s a huge topic and I’ll hope to cover more on that later. For now, I want to explain the basics of the framework and the toolkit.
The AJAX Control Toolkit is a free download from http://www.codeplex.com/AtlasControlToolkit and can be added as a reference to your application. It is not deployed to the GAC, so it will be copied to the bin folder when the reference is made. This assembly comes with support for many other cultures as well, so don't be surprised if a lot of language folders appear in your bin directory; these are localized resources for the AjaxControlToolkit DLL. It comes with a new set of server-side components and extenders, a new way to develop custom AJAX controls and a new base class, and new client scripts to handle the AJAX features.
There is some commonality in the toolkit; for instance, the AJAX Control Toolkit extenders all have a TargetControlID property; this is the ID of the control that the extender will extend. Some validation is performed to ensure the target control is of the correct type. For controls that have a popup mechanism, like the HoverMenuExtender, a PopupControlID also exists. This ID holds the ID of the control that will appear overtop the target control. This is often a panel control. Along with popup extenders are a PopupPosition property, which denotes whether the popup appears to the right, left, above, below, or over top the target control.
<asp:Label ID="Target" runat="server">Target Hover Text</asp:Label> <asp:Panel ID="ShowMe" runat="server" style="display:none;"> Hover Content </asp:Panel> <ajax:HoverMenuExtender ID="ext" runat="server" TargetControlID="Target" PopupControlID="ShowMe" PopupPosition="Right" PopDelay="250" OffsetY="20" EnableViewState="false" />
In addition to the hover menu extender properties described above are properties to control the delay amount to keep a window open (PopDelay). This value, often in milliseconds, keeps the window open when the mouse is outside the window, so if the popup is appearing further away from the target, the user can get to it before it disappears. How can the popup appear further away, you may ask? These controls usually have an OffsetX and OffsetY property to move them in a specific direction away from the target.
In addition, the control toolkit also features a DynamicControlID property for some controls. In the modal popup extender example, an inner control can have its content dynamically generated by assigning the property above to an inner control. Assigning the DynamicContextKey and DynamicServiceMethod properties allows the extender to invoke a web service method and populate a modal popup with dynamically generated content. For a great example on this, see this article: http://blogs.msdn.com/delay/archive/2006/11/17/dynamic-content-made-easy-redux-how-to-use-the-new-dynamic-population-support-for-toolkit-controls.aspx.
The BehaviorID is another useful property; it allows you to assign a string value that can be used at client-side to gain access to the object. For instance, if the hover menu defined above was the following:
<ajax:HoverMenuExtender ID="ext" runat="server" BehaviorID="GetMe" />
The text "GetMe" can be used to retrieve a reference to the extender on the client side using the $get client function. This function is defined in the AJAX Client Library that comes with the ASP.NET AJAX Framework. For a good example of using the behavior ID, see Brad Abram’s blog entry at: http://blogs.msdn.com/brada/archive/2006/11/01/ajax-animations-with-the-asp-net-ajax-toolkit.aspx.