HomeASP.NET Completing an ASP.NET AJAX Server-Centric ...
Completing an ASP.NET AJAX Server-Centric Based Online Shopping Website
After a long trip, we finally come to the last article of our eleven-part series on building an online shopping website. Now let’s examine the controlling modules of the sample, specifically the foreground management modules of the shopping city.
Contributed by Xianzhong Zhu Rating: / 12 February 06, 2008
In fact, all the modules related to this part are created entirely through use of ASP.NET UserControls.
Now, let’s first delve into the news module.
News Module
The news module is handled by using the "NewsUC.ascx" UserControl which is mainly responsible for showing the first ten pieces of news about the shopping city in animating rolling form. Figure 39 gives the run-time snapshot of the foreground control panel before any user logs in. In Figure 39, the bottom part marked by red bold lines is just the news module to be discussed here.
Figure 39—the run-time snapshot for the foreground news modules
In the respect of design there is only a control DataList named "NewsList" with each of its records used to display the news title of each piece of news. Note that to gain the better effect of user vision, the HTML element <marquee> is leveraged to roll the news titles, as is shown in the following list:
Here the crucial programming is related to the BindNewsData helper functionwhich performs the task of getting the first ten pieces of news-related data and typically uses a SqlDataReaderobject to hold the result. At last, the data is bound to the DataListcontrol named "NewsList."
In the next section, let’s discuss the general operation module.
The foreground operation module is handled by using the "OperationUC.ascx" UserControl which is responsible for providing common operations to the users, such as logging in, registering, product searching and advanced searching, etc. Figure 40 gives the design-time snapshot of this control.
Figure 40—the design-time snapshot for the foreground operation module
First, substantially, an ASP.NET UserControlis very much like a Pageobject, with a great deal of properties and methods that are quite similar. Here, when users click the "Login" button, we’ll use UpdatePanel1to display the login-related information as well as gain the local update effect.
Second, we’ve still used an ASP.NET AJAX Toolkit TextBoxWatermarkExtendercontrol to gain the watermark effect with the textbox control below the "Searching Keyword" label.
Third, we’ve leveraged UpdatePanel2to enclose the area inside which lies an ASP.NET Panelcontrol which is used later to load one of the three modules (i.e. AdminOperationUC.ascx, CustomerOperationUC.ascx, and MyOperationUC.ascx) when the users log into the system to also gain the locally updated effect.
Now, let’s take a look at the initialization of the control.
As you can see from the code above, this function first judges whether the user has logged into the system, i.e. decides if the value of Session["UserID"]is empty. If the value of Session["UserID"]is not empty, then it means the user has already logged into the system. Therefore, the related module is loaded according to the different role of the user: if the role is "SuperAdministrator", the "AdminOperationUC.ascx" module is loaded, if it is "Supplier" then "CustomerOperationUC.ascx" and if "Common Customer" then "MyOperationUC.ascx."
Here since all the buttons related to event handlers are simple to follow up, we will only take a short look at the ShowMessage helper function:
This function is invoked in the above-mentioned buttons related to event handlers. And as has been discussed in the previous sections, the reason we’ve used the RegisterStartupScript static member function of the ScriptManager controlinstead of "Response.Write(…)" is because using "Response.Write(…)" during the course of an asynchronous postback will lead to non-execution of the inner script or even a fatal script error.
Next, let’s shift our attention to the notification module.
This module is handled by using the "NotifyUC.ascx" UserControl which is mainly used to show the advertisement concerning the shopping city. Figure 41 gives its design-time snapshot.
Figure 41—the design-time snapshot for the foreground notification UserControl
Seen from Figure 41, mainly a hyperlink is put on the page, which is used to view the details of the notification. Here’s the related HTML code:
Here, the BindNotifyData functiongets the notification-related information out of the server-side database and puts it into a SqlDataReaderobject. Then, it reads the content of the notification from inside the SqlDataReader object drand assigns it to the local variable Body.
In addition, you can also watch the run-time snapshot of the notification module in the above Figure 39.
This module is finished by using the "MyOperationUC.ascx" UserControl which is mainly used to show the customer operation links, such as "My Shopping Cart," "My Order," "My Personal Info," "Modify Password" and "Leave Word." Figure 42 gives its design-time snapshot.
Figure 42—the design-time snapshot for the UserControl ‘MyOperationUC.ascx’
Since this module is pretty easy, let’s only look at its related HTML code:
This module is handled by using the "CustomerOperationUC.ascx" UserControl, which is mainly used to show the supplier operation links, such as "Product Management," "Category Management," "My Personal Information" and "Modify Password." Figure 43 gives its design-time snapshot.
Figure 43—the design-time snapshot for the UserControl ‘CustomerOperationUC.ascx’
This module is still pretty easy. Here is its related HTML code:
For the last super administrator module (AdminOperationUC.ascx), we choose only to give its design-time snapshot as shown in Figure 44 since its inner logic it is pretty easy and similar to the two above.
Figure 44—the design-time snapshot for UserControl ‘AdminOperationUC.ascx’
In fact, this part of the function is done through the "Product.aspx" page. In detail, this page bears the responsibility of loading the six modules discussed above. Note here that the "Customer Functionality," "Supplier Functionality" and "Super Administrator Functionality" modules are dynamically loaded by the operation module, while the remaining three modules ("News Module," "Notification Module" and "Operation Module") are statically loaded by the "Product.aspx" page.
The following shows the related HTML code in the "Product.aspx" file:
As we have introduced above, when users that belong to different kinds of roles log into the online shopping city, the left-side control panel on the "Product.aspx" page will show different contents. Figure 45 shows the four different run-time snapshots of the control panel (merged into one) when the four kinds of different users log into the system.
Figure 45—four different running-time snapshots of the control panel correspond to different kinds of users logging into the system
Conclusion
Finally, we've reached the end of our very long journey! Now, let me draw some conclusions from this sample application, as follows:
In building an ASP.NET AJAX server-centric typed application, the so-called "AJAX" mainly focuses upon the two server controls—ScriptManager and UpdatePanel, which just accomplish the core functionality of AJAX—partially updating a web page. In addition, to gain a friendlier user experience you can leverage as many of the extender controls provided by the ASP.NET AJAX Control Toolkit (most of which are extremely easy to use) as possible.
Based on point 1, we can apparently draw the conclusion that presently ASP.NET 2.0 still plays the main role in constructing ASP.NET AJAX server-centric typed applications.
Partly due to this online sample being so long and partly due to the inner logic being pretty complex with a good many modules entangled with each other, we’ve only utilized a few core ASP.NET AJAX Server controls without taking into consideration many of the excellent extender controls within ASP.NET AJAX Control Toolkit as well as other ASP.NET AJAX Server controls.
Because the online shopping sample is only in its rudimentary form, there are many aspects that need to be improved or added.
Finally, I wish you joy during the course of your exploration of ASP.NET AJAX server-centric type applications.