CloserLook
Gaia Ajax 3.5 for ASP.NET
Much More than Just another ASP.NET Library
By Dino Esposito
Look around and you ll find quite a few control libraries to ease and expedite the development of ASP.NET pages and applications. Each library offers its own set of customized controls designed to give you a better design-time experience, particular functionalities not provided by ASP.NET stock controls, or a richer programming model. Recently, nearly all control libraries have been improved to support AJAX capabilities so the way in which each library supports AJAX has become an important factor to differentiate libraries.
So what s exciting in Gaia Ajax 3.5 to justify a review? What makes this library shine among the plethora of ASP.NET control libraries available today?
Doing AJAX Today
I started with AJAX about four years ago when AJAX was mostly a relatively simple piece of JavaScript code to place an XMLHttpRequest call. Since then I ve changed my mind many times about what was the best way to add AJAX capabilities to an ASP.NET application. For example, I first welcomed ASP.NET partial rendering, because it allows us to add AJAX to existing ASP.NET applications with a very short learning curve. Then I turned my attention to rich client-side programming environments based on JavaScript extensions. AJAX means more power to the client; when the client is the browser, AJAX means more JavaScript code inside web pages.
However, the need for more JavaScript code in web pages doesn t mean that you, as a developer, have to write it. A good control library can do that for you. Wouldn t it be nice if you could just keep on writing ASP.NET code as usual and still get asynchronous requests going on? This is what makes Gaia AJAX effective, extremely easy to use, and pretty unique among commercial ASP.NET libraries.
Gaia AJAX at Work
Usually when you are going to present an ASP.NET control library you tend to focus on the richest controls in the box, such as advanced grids, hierarchical tree-based views, calendars, and so forth. To get the gist of Gaia AJAX, instead, you should start by looking at the rewrite of two of the most popular base controls in ASP.NET the Button control and the Label control. Here s an interesting piece of code:
OnClick="Button1_Click"
Text="Click to experience Gaiaware"
/>
Would you say there is any AJAX in this code? At first sight, one would say that a regular postback occurs that refreshes the page as the user clicks on the button. The code-behind class confirms this first impression. The code looks a lot like classic ASP.NET code, with no AJAX around:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text +=
"
You typed " +
TextBox1.Text + "";
}
The trick is in the work performed under the hood by Gaia controls. In the first place, Gaia Ajax controls emit a JavaScript library that contains a client-side object model for each featured control (see Figure 1).
Figure 1: Items downloaded by a simple Gaia-enabled web page
Note that all the CSS references in the figure are intended for development purposes, which allows you to customize the appearance of each control. In production, it is recommended you group them all in to a single CSS file (such a big CSS file, however, is provided with the samples).
The Gaia Button control inherits from the classic ASP.NET Button control, and has a few extra properties that support rich behaviors, such as resizing and drag-and-drop. In terms of posting, as well, the Gaia Button control is nearly the same as a classic ASP.NET Button control. The button instructs the browser to submit the current form. At this point, though, the library intercepts the request and runs it asynchronously.
The request is handled on the server as a regular postback and fires the standard page lifecycle. The response returned to the client, however, contains a description of the changes made. Changes are expressed in terms of JavaScript instructions that address the client-side object model of the Gaia controls. The response is limited to a few hundred bytes (see Figure 2).
Figure 2: Typical response after a Gaia postback
Gaia Ajax vs. Partial Rendering
Gaia Ajax 3.5 doesn t push the so-called pure AJAX approach, which would require a lot of JavaScript on the client to fire remote calls, process JSON streams, and update the HTML user interface. In a way, Gaia Ajax is much more similar to ASP.NET partial rendering. However, quite a few differences exist with partial rendering, too. Once you pick up Gaia Ajax, you no longer need ScriptManager or UpdatePanel controls. You simply use Gaia controls in lieu of ASP.NET controls even for basic tasks that involve buttons, text boxes, list boxes, and labels. Gaia controls offer the same programming interface as ASP.NET controls; for developers, it still looks like regular ASP.NET. However, any postback now magically results in an AJAX asynchronous postback.
What about the viewstate? At this point I must mention a unique feature of Gaia Ajax. Yes, architecturally speaking, it is quite similar to classic partial rendering, but it relies on a radically different implementation that ensures much shorter payloads and even partial viewstate rendering. Yes, you got it right. Gaia controls not only return (their own autogenerated) JavaScript instructions instead of markup, they also return only the section of the viewstate that has really changed. I must confess that my interest in Gaia Ajax increased significantly when I figured out this unique behavior.
Gaia Ajax vs. Other Libraries
As you can see from Figure 3, Gaia provides ad hoc templates to use in Visual Studio 2008 and creates a custom tab in the Visual Studio 2008 toolbox.
Figure 3: The Gaia toolbox in Visual Studio 2008
The Gaia toolbox doesn t list a huge number of rich controls like those you may perhaps find in other libraries. However, you have controls like TreeView, Toolbar, Accordion, and the useful Window control. The Window control injects the JavaScript code necessary to display a popup window whose child controls will post back as usual in ASP.NET programming except that it all works asynchronously. It should be noted that the Window control doesn t really create a classic popup browser window that can be blocked by some browser policy. In Gaia, a popup is merely a DIV tag displayed on top of everything else, with or without modality. Many Gaia controls feature the Aspects collection property, through which you can add such aspects as resizability, draggability, and moveability:
protected void Page_Load(object sender, EventArgs e)
{
// This makes the specified resizable at run time
Panel1.Aspects.Add(new AspectResizable());
}
Gaia also offers a nice collection of visual effects you can enable through the Effect class, as shown here:
protected void Button1_Click(object sender, EventArgs e)
{
new Effect(Panel1, Effect.TypeOfEffect.Highlight);
}
The net effect of the preceding code is that when the Button1 element is clicked, the specified panel is highlighted. Because of the internal mechanics of Gaia controls, the interoperability between Gaia controls and other ASP.NET controls is limited. In other words, you can t simply click on a regular ASP.NET button to trigger a Gaia postback. Likewise, you can t simply trigger a Gaia postback and update a classic Label control. To enable a sort of interoperability between Gaia controls and ASP.NET controls, you need to wrap the ASP.NET control in to a Gaia container control, such as the Gaia Panel control. Next, in the Gaia event, call the ForceAnUpdate method on the panel to refresh any control in the area:
protected void Button1_Click(object sender, EventArgs e)
{
// Modify any ASP.NET controls here
:
// Force an update of the area
Panel1.ForceAnUpdate();
}
You don t see a grid control in Figure 3. Does this mean that with Gaia you can t produce grid-based views? GridView and data-bound controls are fully interoperable with Gaia as long as you place them in a Gaia container control. Once you put, say, a GridView in a Gaia container control, you can have the grid post back and generate in extremely short responses. Gaia container controls include Panel, MultiView, Window, and ExtendedPanel. A full example can be tested live at samples.gaiaware.net/Ajax-GridView.aspx.
Characteristics
In summary, Gaia Ajax proposes an alternative way of doing AJAX in ASP.NET applications. It doesn t offer a rich JavaScript library for you to program explicitly. You will keep on writing your pages using C# or VB code in combination with classic ASP.NET markup. Any apparently old-style postback will become an AJAX postback. This is not obtained primarily by wrapping ASP.NET controls in special containers, such as UpdatePanel, but rather by using a new set of basic controls that behave in an AJAX-compliant manner. Any data-binding skills you may have will be fully reusable. And you won t write a single line of JavaScript (until, like in classic ASP.NET, you see a special benefit in doing so).
To summarize in one sentence my feelings about Gaia Ajax, I d simply say that, in my experience, Gaia Ajax makes AJAX programming as easy as it is to program for the web with ASP.NET. Finally, note that Gaia AJAX is not currently designed to work with ASP.NET MVC.
Rating:
Website: gaiaware.net
Price: US$195 per developer; one-year subscription, US$595 per developer
Dino Esposito ([email protected]) is an architect at IDesign, specializing in ASP.NET, AJAX, and RIA solutions. Dino co-authored Microsoft .NET: Architecting Applications for the Enterprise and Microsoft ASP.NET and AJAX: Architecting Web Applications.
