Overview of Popular JavaScript Frameworks - ASP.NET AJAX

By

This is the fifth and final istallment in the JavaScript frameworks overview series. For the past several weeks, we've been reviewing the top dozen frameworks in use in order to simplify the decision of choosing a framework. The problem isn't a lack of good choices, but rather an abundance of them! In the previous four installments, we covered:

• Part 1: Prototype, script.aculo.us, MooTools
• Part 2: JQuery, Yahoo! UI Library (YUI), MochiKit
• Part 3: Dojo, Rialto, Spry
• Part 4: qooxdoo, and SproutCore

This week's article is dedicated entirely to Microsoft's ASP.NET AJAX Framework, because there's so much to cover.

ASP.NET AJAX Links

• URL: http://www.asp.net/ajax/
• Docs: http://www.asp.net/ajax/documentation/
• Demos: http://www.asp.net/ajax/showcase/
• Community: http://www.asp.net/community/
• Tutorials: http://www.asp.net/learn/ajax/
• Videos: http://www.asp.net/learn/ajax-videos/

Microsoft's ASP.NET AJAX was created to assist developers in the rapid creation of efficient and interactive Web applications, much like SproutCore. In many ways, ASP.NET AJAX represents a logical evolution of the old Visual Basic Rapid Application Development (RAD) model. The AJAX Framework is built into ASP.NET 3.5 and is also available as a separate download for ASP.NET 2.0. Since there are many ASP.NET users, Microsoft did well to leverage this popular Web language into the client-side domain. Some of the main advantages of using ASP.NET AJAX to develop your Web applications include:

• Many of the ASP.NET controls have Ajax built-in so that callbacks aren't required to update their contents, reducing JavaScript code.
• The Microsoft AJAX Library extends JavaScript objects to provide additional functionality such as namespaces, inheritance, interfaces, enumerations, reflection and helpers for strings and arrays.
• The XmlHttpExecutor class greatly facilitates making server calls using Ajax. It implements numerous functions for making GET/POST calls and can handle plain text, HTML, JSON, XML and any other data type that you might want to send to your page.
• It includes debugging and tracing capabilities.

Throw in extensive documentation, technical support, and ease of use that you'd come to expect from Microsoft, and you've got a winning combination!

Server Controls

The ASP.NET AJAX Framework comes with four controls out of the box: ScriptManager, UpdatePanel, UpdateProgress and Timer.

The ScriptManager Control

This is a non-visual control for managing client scripts in Microsoft ASP.NET AJAX pages. Including the ScriptManager control automatically adds the Type Extensions required by client scripts in order to use the library. They also play a role in features such as partial-page rendering and Web service calls. Later on in this article, we'll look at how the ASP.NET AJAX Library's client-side script extensions provide additional functionality to JavaScript and make the language more consistent with ASP.NET coding standards. The following example registers a client script and a Web service using the ScriptManager:

<form id="aForm" runat="server"> <asp:ScriptManager ID="ScriptMgr" runat="server"> <Scripts> <asp:ScriptReference path="MyScript.js" /> </Scripts> <Services> <asp:ServiceReference path="SimpleWebService.asmx" /> </Services> </asp:ScriptManager> ... </form>

Notice that scripts registered with the ScriptManager control must reside between <FORM> tags.

The UpdatePanel Control

The ScriptManager can be included with the UpdatePanel control to perform partial-page updates without the need for JavaScript Ajax calls. The regions to dynamically update can be set using special tags or programmatically in JavaScript. Whether or not a page participates in partial-page updates is determined by the EnablePartialRendering property of the ScriptManager control. By default, the EnablePartialRendering property is set to true, so simply adding the control to a page is enough to enable partial-page rendering. You have the option of using a specific trigger to perform a refresh - like a button - or having the UpdatePanel control’s content updated on every callback that originates from within the page. To use a trigger, you have to set the UpdatePanel's UpdateMode attribute to "Conditional." A related attribute, called ChildrenAsTriggers, specifies whether or not to trigger callbacks from immediate child controls of the UpdatePanel and refresh the panel's content.

The <ContentTemplate> tag defines the visual content that will appear inside the UpdatePanel control when rendered. In the following example, the Button control will act as an asynchronous callback trigger. The ChildrenAsTriggers attribute isn't included since it's true by default:

<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel content</legend> <!-- Other content in the panel. --> <%=DateTime.Now.ToString() %> <br /> <asp:Button ID="Button1" Text="Refresh Panel" runat="server" /> </fieldset> </ContentTemplate> </asp:UpdatePanel> </div> </form>

The trigger control doesn't have to reside inside the UpdatePanel to cause a refresh to the panel's content. You can choose any control on the page using the <asp:asynccallbacktrigger> tag inside the <triggers> element. In fact, the <trigger> tag can contain a number of controls to act as triggers. The <asp:asynccallbacktrigger> tag's ControlID parameter defines the ID of a trigger control. Here's the same example as above except that this time, the button is outside of the UpdatePanel:

<form id="form1" runat="server"> <div> <asp:Button ID="Button1" Text="Refresh Panel" runat="server" /> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsynccallbackTrigger ControlID="Button1" /> </Triggers> <ContentTemplate> <fieldset> <legend>UpdatePanel content</legend> <%=DateTime.Now.ToString() %> </fieldset> </ContentTemplate> </asp:UpdatePanel> </div> </form>

You can also set the trigger programmatically via the ContentTemplateContainer property, which represents the <ContentTemplate> tag. The following Visual Basic server script demonstrates its usage:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Dim up1 As UpdatePanel up1 = New UpdatePanel() Dim button1 As Button button1 = New Button() up1.ContentTemplateContainer.Controls.Add(button1) Page.Form.Controls.Add(up1) End Sub

The UpdateProgress Control

As the name suggests, the UpdateProgress control provides status information about partial-page updates in the UpdatePanel control. The layout of the UpdateProgress control is completely customizable and can be displayed after a delay to prevent flashing with fast partial-page updates. The UpdateProgress control renders a <DIV> element made visible when an associated UpdatePanel control makes an asynchronous server call. It doesn't display when the page initially loads or for synchronous callbacks.

You can associate an UpdateProgress control with a specific UpdatePanel control by setting the AssociatedUpdatePanelID property of the UpdateProgress control. It's also possible to have the UpdateProgress control display progress for any asynchronous callback on the page. The <progresstemplate> element contains the message displayed by an UpdateProgress control, which can be a simple string, HTML or other markup. The following example shows how to specify a string message for a specific UpdateProgress control:

<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server"> <ProgressTemplate> An update is in progress... </ProgressTemplate> </asp:UpdateProgress>

By including the ScriptManager control, you can use JavaScript to work with UpdateProgress control events and attributes. In the following example, the UpdateProgress control's message is set in the InitializeRequest event when the ButtonTrigger fires the callback:

<script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); var callbackElement; function InitializeRequest(sender, args) { callbackElement = args.get_callbackElement(); if (callbackElement.id == 'ButtonTrigger') { $get('UpdateProgress1').style.innerText = "Updating in progress..."; } } </script>

The Timer Control

The Timer control performs server calls at defined intervals. You can use the Timer control along with an UpdatePanel to trigger periodic partial-page updates or to refresh or post the whole page.

The ASP.NET AJAX Control Toolkit

The ASP.NET AJAX Control Toolkit is a project for creating ASP.NET AJAX controls. Built on top of the Microsoft ASP.NET AJAX Framework, the Control Toolkit gives you a great selection of controls and also gives you the ability to build your own controls from scratch. The ASP.NET controls are a big business and many companies specialize in them. As the following example shows, adding a custom control to your page is simple. It registers a custom control built with the Control Toolkit. The first line registers the toolkit and provides a TagPrefix for the control. The next line includes the ScriptManager. Our control can then be used in the page by including our TagPrefix, along with the control name:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"%> <!-- Add AJAX Script Manager to the page: --> <asp:ScriptManager ID="ScriptManager1"runat="server"/> <!-- Add our custom control to the page: --> <ajaxToolkit:ElementPopulater ID="dp" BehaviorID="dp1" runat="server" TargetControlID="form1$Label1" ClearContentsDuringUpdate="true" ServiceMethod="GetHtml" />