Building an ASP.NET AJAX Server-Centric Based Online Shopping Website

On the one hand, with the popularity of Internet applications, electronic commerce ("EC" for short) has been developing more and more quickly. As a new type of commerce running model and based upon the open Internet environments and browser/server applications, EC has achieved the goals of online shopping for customers, online bargaining between the dealers, and online payment. Business to business (B2B) represents the electronic commerce activities between  enterprises whereas business to customer (B2C) is the direct activities between the merchants and customers, i.e. the so-called online shopping. Therefore, enterprises and merchants can make full use of network infrastructures, payment platforms, safety platforms, and management platforms supplied by electronic commerce cities to run their own business activities more efficiently and with lower cost.

On the other hand, AJAX, as the "soul" of web 2.0, has been attracting more and more web application developers. Certainly, ASP.NET AJAX (previously named "ATLAS"), as an all-sided AJAX framework which is mainly based on the Microsoft ASP.NET 2.0 platform and wholeheartedly supported by developer communities, has interested a large number of AJAX developers. In a nutshell, the solutions provided by the ASP.NET AJAX framework can be divided into two types of programming models: the server-centric programming model and the client-centric programming model.

In this long (11-part) series, you will learn step by step to build an ASP.NET AJAX server-centric based online shopping website. Please notice that, though this demo application seems pretty long, it is in fact still easy to comprehend in its inner logic. Of course, introducing the ASP.NET AJAX framework to some degree will add some difficulty in grasping the core idea of this application.

Taking one with the other, the online shopping website is a B2C system. It has achieved nearly all the common routines associated with typical online shopping services, including browsing and buying products, creating orders, making comments on the related goods, leaving the words, and managing the users. Also, the management-related tasks such as users, roles, and safety are provided all together. In addition, this application includes an information center to help the users keep track of the latest trends on the online shopping website.

Author's Note: To follow along with the online shopping demonstration application in this article, you're assumed to have installed Visual Studio 2005, as well as at least these two components of the ASP.NET AJAX framework: ASP.NET AJAX Extensions and ASP.NET AJAX Control Toolkit. And also, it is highly suggested that you download the source files accompanying this article to give them further study.

About the Server-Centric Programming Model

About the ASP.NET AJAX Server-Centric Programming Model

On the whole, the ASP.NET AJAX framework has provided web developers with two types of programming models-the server-centric programming model and the client-centric programming model. These hold their respective benefits. Like the ASP.NET technique itself, the MS AJAX server-centric programming model will generate JavaScript code at run-time and send it to the client side, which obviously causes the leaden burden fall onto the server side and thus reduces the performance of the whole system.

In contrast, the client-centric programming model moves large quantities of business logic from the server side to the client side by introducing plenty of MS AJAX characteristic client-side controls and a pretty integrated and comparatively perfect architecture. However, from the point of view of controllable capacities and flexibilities, the server-centric programming model possesses its own strong points especially as far as stability and safety is concerned. The following Figure 1 shows the general architecture of the server-centric programming model within the  ASP.NET AJAX framework.

Figure 1-ASP.NET AJAX server-centric programming model

Obviously, as you can see from the above figure, ASP.NET AJAX is based upon the ASP.NET framework and performs better embellishment and encapsulation to facilitate the ASP.NET AJAX client side.

System General Design

System General Design

In this section, let's first take a bird's eye view of the general design of the whole system, which will include the design's functionality and architecture as well as the design of the module operation flow. We'll examine each of these one by one.

Functionalities

From the point of view of functionality, the sample application in this series mainly consists of the following parts: registration and login modules, user management modules and role management modules. Concretely, however, the online shopping city application includes the following modules:

1. Registration and Login Modules

These modules mainly provide the following functionalities:

1. Registering user information. 
   
2. Submitting user information. 
   
3. User login. 
   
4. User logoff.

2. User and Role Management Modules

These modules mainly undertake the tasks of managing users and roles, as well as specifying different roles, as follows:

1. Role management.
   
2. Adding roles.
   
3. Editing roles.
   
4. User management.
   
5. Adding background users.

3. Viewing, Shopping, and Order Modules

These parts comprise the following:

1. Viewing products.
   
2. Buying goods.
   
3. Viewing the shopping cart.
   
4. Submitting the order.
   
5. Making comments on the related goods.
   
6. Leaving word.

4. Product Searching Modules

Generally there are two kinds of search functions that need to be supported by most real-scenario applications: simple searching and advanced searching. Both of them are achieved in this online shopping application.

5. User Info Center Modules

These modules mainly bear the responsibility of providing users with various kinds of operations, such as modifying their passwords. In detail, they include:

1. Modifying password.
   
2. Modifying personal information.
   
3. Viewing personal information.
   
4. Viewing order information.

6. Product and Order Management Modules

These modules are as follows:

1. Product category management. 
   
2. Adding product categories.
   
3. Modifying product categories.
   
4. Product management. 
   
5. Adding products.
   
6. Modifying products.
   
7. Product comment management.
   
8. Order management.

7. Information Center Management

This set of modules carries out the tasks of issuing and managing related information for the whole system, as follows:

1. News management. 
   
2. Issuing news.
   
3. Modifying news.
   
4. Setting up the bulletin board(s).
   
5. Comment management.

8. The Online Shopping City Foreground Modules

As a practical online shopping application, the following modules should be included:

1. News module. 
   
2. Operation module.
   
3. Bulletin board module.
   
4. Customer functionality module.
   
5. Product suppliers' functionality module.
   
6. Super administrator functionality module.

Architecture Design

Architecture Design

In this example, we have followed the standard Three-Tier Model to construct the online shopping site: database, data access, business logic, and presentation. The following Figure 2 shows the rough model leveraged in this example.

Figure 2-the Three-Tier Model with which to construct our online shopping city

In the next section we will focus on the flow between each of the modules and tiers. Due to space limitations, we will only be able start our coverage of this area, and continue it in the next part. 

Module Operation Flows

General Modules Operation Flows

Since we have learned each of the modules that will be leveraged in this sample application when we looked at the system's general design, it's time to take a look at the general flows associated with the main modules.

1. Viewing, Shopping and Ordering Products Modules

The general flow between the viewing, shopping and ordering products modules can be depicted with the following flow chart in Figure 3.

Figure 3-the flow chart for viewing, shopping and ordering products

2. Foreground Modules of the Shopping City

This part corresponds to the control panel of the shopping city, which will load different modules according to the different roles of the users (common customers, the product suppliers, and the super administrators of the shopping city). Figure 4 gives the related flow chart for this part.

Figure 4-the flow chart for the foreground of the shopping city to load different kinds of modules

In the following article we will study the important database design. Be sure to check back next week.