Windows Developer Power Tools

1.2 Adding Ajax Functionality with Anthem.NET

Ajax is currently a hot technology. It greatly enhances web application users’ online experiences by improving performance and responsiveness: postbacks of the entire page are eliminated, with data transfer focusing on a small subset of the page.

However, while Ajax improves the user experience, it creates new headaches for developers, who are stuck writing more code to wire up Ajax on each control.

Anthem.NET eliminates that additional work by encapsulating the Ajax portion into regular web form controls. The new Anthem.NET controls work just like regular ASP.NET controls, but they have the power of Ajax wrapped up inside. Less coding, better performance, happier users. Everybody wins.

Jason Diamond, a trainer at the highly respected DevelopMentor, came up with the concept for the toolkit while teaching a week-long ASP.NET course. The concept grew and ended up morphing into what’s now Anthem.NET.

Anthem.NET at a Glance
Tool	Anthem.NET
Version covered	1.2.0
Home page	http://www.anthemdotnet.com
Power Tools page	http://www.windevpowertools.com/tools/19
Summary	Provides web form controls with Ajax built right into them; no client-side JavaScript required
License type	Public Domain
Online resources	User forums, active mailing list, online tutorial at CodeProject.com
Supported frameworks	.NET 1.1, 2.0
Related tools in this book	Atlas, Ajax.NET Professional

Getting Started

Anthem.NET’s distribution contains separate solutions for Visual Studio 2003 (.NET 1.1) and 2005 (.NET 2.0). The distribution also comes with example web sites for both versions. Download Anthem.NET from its home page and extract the .zip file to a folder. Open the solution of your choice, build it, and grab the Anthem.dll file to use in your projects.

Using Anthem.NET

Getting starting with Anthem.NET controls is very simple: reference the Anthem.dll assembly (see the Appendix), drop some controls on your design surface, set a few properties, and wire up a few events.

A basic button declaration is nothing more than:

<anthem:Button ID="btnSubmit" runat="server" OnClick="Button1_Click"
               Text="Submit Order"
               TextDuringCallBack="Working"
               EnabledDuringCallBack="False" />

This renders the simple button shown in Figure 1-3.

Figure 1-3. An Anthem.NET button

The TextDuringCallBack and EnabledDuringCallBack properties let you shape your users’ experiences as they interact with your application. You’ve undoubtedly used an online shopping cart where clicking the Submit Order button gives you a dire warning to not click the same button a second time. The TextDuringCallBack and EnabledDuringCallBack properties allow you to disable controls and provide a visual cue to your users that they can’t take action until processing is completed.

Figure 1-4 shows the button disabled, preventing users from taking an unintended second action.

Figure 1-4. The button disabled during processing

To add a label to hold a timestamp for when the user’s order was submitted, simply include a line like the following:

<anthem:Label ID="lblTimestamp" runat="server"></anthem:Label>

Wiring up the Submit Order button’s Click event with a delay will let you see the change in the button’s state before the system completes:

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
    this.lblTimestamp.Text = "Purchased at " + DateTime.Now.ToString( );
    this.lblTimestamp.UpdateAfterCallBack = true;
}

Figure 1-5 shows how things look after the event has run its course.

Figure 1-5. The end result

Many of Anthem.NET’s controls support these same handy properties.

You can also use Anthem.NET’s capabilities to disable other controls via the PreCallBackFunction and PostCallBackFunction properties. Say you want to add another button to the mix, and then have it disabled when you’re processing the shopping cart order. The button definitions should now look like this:

<anthem:Button ID="btnReturn" runat="server" Text="Return to Store" />
<anthem:Button ID="btnSubmit" runat="server" OnClick="Button1_Click"
               Text="Submit Order"
               TextDuringCallBack="Working"
               EnabledDuringCallBack="False"
               PreCallBackFunction="btnSubmit_PreCallBack"
               PostCallBackFunction="btnSubmit_PostCallBack" />

You’ll also need to add some client-side JavaScript to handle the pre- and post-callback events:

<script language="javascript" type="text/javascript">
function btnSubmit_PreCallBack(button)
{
    document.getElementById('<%= btnReturn.ClientID %>').disabled = true;
}

function btnSubmit_PostCallBack(button)
{
    document.getElementById('<%= btnReturn.ClientID %>').disabled = false;
}
</script>

Tip

It’s a good idea to use <%= btnReturn.ClientID %>, because ASP.NET often changes a control’s client ID when it is rendered to the browser. Although you can have controls with the same ID in a user control, page, or master page, HTML requires that each element have a unique ID. If you use the ClientID property, you can be sure that you are using the ID that is rendered to the client.

Running this page now displays two buttons (Figure 1-6).

Figure 1-6. The two-button configuration before submitting the order

Figure 1-7 shows what the user will see after submitting the order.

Figure 1-7. Both buttons disabled during processing

These brief examples are just a taste of what Anthem.NET offers. The toolkit allows you to work with different validation models and with Ajaxified listboxes, calendars, and a host of other controls. It even lets you call methods on pages or controls, enabling you to invoke server-side page methods via client-side JavaScript.

Getting Support

Support for the Anthem.NET project includes a wealth of demos and tutorials, as well as a fairly active set of forums. The standard SourceForge bug tracker and feature request pages are also available.

Developers on the Anthem.NET team have invested some serious work in creating terrific documentation. Some excellent demos are available via the site’s home page, including a tutorial with 43 separate examples for learning how to implement Anthem.NET in your projects.

You’ll also find a fine article on Anthem.NET by Howard Richards at http://www.codeproject.com/Ajax/AnthemNET.asp.

Anthem.NET in a Nutshell

One important aspect of Anthem.NET’s Ajax implementation should be pointed out: Anthem.NET sends the entire postback through Ajax instead of just targeting specific calls. This means that the page’s form values and viewstate are sent with each Ajax call. For many pages, this isn’t a huge deal, but it does lead to an overall increase in bandwidth usage and can mean that Anthem.NET is slightly slower than other Ajax implementations that don’t send this information on each call. This drawback won’t generally outweigh the benefits of Anthem.NET; however, you do need to be aware of such issues when making your design decisions.

Undoubtedly, one of Anthem.NET’s greatest strengths lies in its detailed tutorials and walkthroughs. Developers unfamiliar with Anthem.NET or even new to Ajax will be able to get rolling in very short order. This tool will also reduce your browser-compatibility headaches. Anthem.NET is fully cross-browser compatible, having been tested with Firefox, IE, and Safari.

Anthem.NET’s controls and features ease the burden of writing Ajaxified applications. It won’t allow you to eliminate JavaScript entirely, but it will greatly minimize the need for it.