Three Patterns of Constructing an ASP.NET AJAX-based Applications

As one of the full-fledged AJAX frameworks, Microsoft ASP.NET AJAX holds many excellent features that deserve to be carefully explored. In this article, we will focus on one topic -- how to use the Microsoft ASP.NET AJAX framework ("MS AJAX" for short later on) to develop web applications under three different circumstances.

Contributed by Xianzhong Zhu
Rating:

/ 5
July 17, 2007

Rate this Article:
MEH MEH++

SEARCH ASP FREE

1. Performance. As is well known, AJAX applications will run on client-side browsers. Therefore, whether or not the implementing modes are accomplished through server-side technologies, the ultimate result will be converted into JavaScript code and run on client-side browsers. The server-side mode, however, will generate JavaScript code at run-time and send it to the client side, which obviously causes the burden to fall onto the server side and thus reduces the performance of the whole system.

2. Functionality. ASP.NET AJAX Extensions merely provide a few server-side controls with few functions (but note that the ASP.NET AJAX Control Toolkit brought out quite a few server-side controls, with the number still increasing). In contrast, there are plenty of ASP.NET AJAX client-side controls, with a rather integrated architecture and perfect functionalities, which to some degree compare beautifully with the built-in server-side ASP.NET 2.0 controls.

3. Difficulty. Thanks to the pattern of the MS AJAX server side, which is similar to that of ASP.NET 2.0, ASP.NET 2.0 developers can quickly familiarize themselves with the MS AJAX server-side model and improve their development efficiency with the fully built-in supporting features (such as compile time check and Intelli-Sense technique) of Visual Studio 2005, with no further requirement for JavaScript coding ability. However, with a wide divergence from the server side implementation, to use the MS AJAX client-side mode, you have to abandon all your current ASP.NET knowledge and the associated development flow to learn and accept a new development pattern -- ASP.NET AJAX xml-script -- and endure various inconveniences. What most dismays developers may be that there are presently no IDEs with excellent support of JavaScript programming and debugging.

4. Server-side cross platform capability. Since the infrastructure of MS AJAX server-side controls is based on the ASP.NET 2.0 architecture, they can only run on the server side based on ASP.NET 2.0, and are unable to run on non-ASP.NET 2.0 server-side platforms. Nevertheless, all the MS AJAX client-side controls are implemented based on standard cross-platform JavaScript irrelevant to the server-side techniques, so we can run them on non-ASP.NET 2.0 server-side platforms. For example, PHP developers can manually add references to the relevant MS AJAX client-side JavaScript libraries to improve the client-side capability.

Choosing the Pattern Most Suitable for You

With the short analysis above, we can divide all the scenarios based on the MS AJAX framework into three typical patterns, as generalized below.

1. Rebuilding a legacy ASP.NET 2.0 application.

Obviously, there exist tons of legacy ASP.NET 2.0 applications around us; this even includes older applications reconstructed for ASP.NET 2.0. Some of them hold features that can benefit from being enhanced with AJAX, such as adding an automatically populating function to some TextBox controls, locally updating areas that often change, and so forth. Since the MS AJAX client-side solution is pretty distinct from that of the ASP.NET 2.0 server side and we are unwilling to rewrite the current entire project with full functions, we have to rebuild them using the MS AJAX server-side solution. Luckily, this kind of pattern requires only a little effort, without even a line of code. By merely adding an ASP.NET 2.0 server-side Extender control you can "ajaxify" your legacy projects elegantly. We won't dwell much on this because later on we'll examine a lengthy sample introducing this solution.

2. Creating a "sheer'"AJAX application from scratch.

"Sheer" AJAX applications refer to those for which there is no presentation tier logic performed on the server side except for the data, while all the presentation logic is accomplished through the client-side JavaScript programming. A typical example is one of Microsoft's latest products -- Windows Live Mail, all of whose functions (including users input, communication with the server side, user interface alteration, etc.) are performed on the client side. Undoubtedly, this contrasts sharply with our familiar ASP.NET development pattern; however, it will result in outstanding server-side performance and clearer application architecture. In such scenarios, we should, as a top priority, take into consideration this kind of solution.

3. Constructing web applications running on non-ASP.NET 2.0 server-side platforms.

When you plan to develop web applications that run on non-ASP.NET 2.0 server-side platforms, we have to consider the MS AJAX client-side solution. A typical example is the PHP case as mentioned above.

Well, for now, I guess you may have already singled out your favorite routine for your ASP.NET AJAX journey. However, you should notice that the two modes (server-centric vs. client-centric) mentioned above are not absolutely opposite but supplement each other. This means that in a real development scenario we just lay emphasis on one side, such as in the case of the "sheer" MS AJAX pattern; we still need the server-side control-ScriptManager to send the necessary JavaScript files that the MS AJAX client side requires.

So much for the discussion of theory. Let's roll up our sleeves to create a vivid sample. Here, we will exemplify the first kind of solution by ajaxifying the famous Microsoft Job Site Starter Kit.

Ajaxifying the Microsoft Job Site Starter Kit

As one of the famous Microsoft Starter Kit samples, the Job Site Starter Kit ("JSSK" for short) provides a platform for candidates seeking a job and employers seeking an employee to share their needs. Why did we select this starter kit as an example? The reason lies mainly in two aspects. On the one hand, the starter kit demonstrates many new and typical features of ASP.NET 2.0 including themes, master pages, new data controls, membership, roles and profiles. On the other hand, this starter kit lays its emphasis on the implementation of the presentation tier, i.e. utilizing rich controls such as GridView, DetailsView, TreeView, WebPart, and User Controls, which can put the ASP.NET AJAX server-side controls (including ASP.NET AJAX Control Toolkit) to good use. In addition, JSSK holds a comparatively simple logic tier, so that we will concentrate on the controls of the presentation tier.

Author's Note: To help beginners quickly familiarize themselves with JSSK, JSSK provides three initial users with three different types of roles introduced in this sample. They are named "ravi" (with the password "pass$word" and playing the role of employer), "alok" (with the same password and playing the role of job seeker), and "admin" (with the password "admin" and playing the role of administrator) respectively. Here, for brevity, we omit the entire detailed introduction to JSSK, including the download and install process (all pretty easy), while we still cover a bit about JSSK associated with the necessary parts we're going to explore.

Function and Architecture Overview

This sample web site, available for employees and employers, allows job seekers to find the proper posts while employers can also advertise for their desired employees. The following outlines the main functions it provides:

Both employees and employers can register with the web site.
Job seekers can post resumes.
Job seekers can search for job postings.
Employers can enter a profile of their company.
Employers can post one or more job postings.
The site manager can modify the education level and social experience of the job seekers supported by the system.

Through a simple demo, Job Site Starter Kit is designed into a typical web application with a three-tier architecture, as is roughly illustrated in the following Figure 1.

Figure 1-the general architecture of JSSK.

That's enough. Now let's start the real work.

Enable ASP.NET AJAX Support for JSSK

With a general overview of the JSSK's basic function and architecture, we're now ready to supply ASP.NET AJAX support for JSSK. In the following sections, we will apply appropriate controls supplied by ASP.NET AJAX and ASP.NET AJAX Control Toolkit to achieve this goal. First of all, let's enable ASP.NET AJAX Support for JSSK.

Adding the Necessary ASP.NET AJAX Assemblies

This step is pretty easy; you just need to copy the assemblies named Microsoft.Web.Preview.dll and AjaxControlToolkit.dll to the bin folder under the root of the JSSK project. Note here we have not explicitly added the core assembly named Microsoft.Web.Extensions.dll since it was added into the .NET GAC automatically when the MS AJAX framework was initially installed.

Modifying File Web.config

In my opinion, this is the most important and a MUST-HAVE step in ajaxifying the JSSK project. Here we only talk about the associated parts of the sample in this article while omitting the complete configuration for the web.config file in constructing a complex ASP.NET AJAX-based web application.

First of all, to let the HTTP Handler supplied by MS AJAX handle the requests to Web Services and JavaScript resources, you have to add the following configuration code under the <system.web> sub-section of the <configuration> section.

</httpHandlers>

Second, under the <pages> sub-section of the <system.web> section you'd better add the following tag prefixes to register the controls that come from ASP.NET AJAX and ASP.NET AJAX Control Toolkit, a uniform and meaningful prefix.

</controls>

Third, still under the <system.web> section, you must add the following code to create the necessary HTTP Module.

</httpModules>

Finally, to show the complete exception information during debugging, you'd better set the Mode parameter to Off, which is finished under the <customErrors> sub-section of the <system.web> section.

A big step to ajaxifying your legacy ASP.NET 2.0 applications has been finished! You can refer to the downloaded source code for detailed info. Let's go on with the more detailed aspects.

Adding the Server Control-ScriptManager

The ScriptManager server-side control serves at the headquarters of each ASP.NET AJAX-based application, which mainly takes the responsibilities of sending the necessary JavaScript files and Web Service proxy in the run time to the client-side browser. Note that since nearly every web page in JSSK needs be enhanced using ASP.NET AJAX, it is suggested that you add the ScriptManager control into the MasterPage.master master page, where you get it done once and forever. There's still one point to note: you have to add this control before all the other ASP.NET AJAX controls, so you can place it next to the <form> section as shown below:

<asp:ScriptManager ID="sm" EnablePartialRendering="true" runat="server" />

Please check back tomorrow for the second part of this three-part article.