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

The Foreground Management of the Shopping City

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:

<marquee id="ScrollNews" scrollamount="1" scrolldelay="50" direction="up"
behavior="scroll"

height="182" onmousemove="stop()" onmouseout="start()">

<asp:DataList ID="NewsList" runat="server" Width="100%" CssClass="Text">

<ItemTemplate>

<a href='../Admin/Information/NewsInfo.aspx?NewsID=<%#DataBinder.Eval
(Container.DataItem,"NewsID") %>' target="_blank"><%# DataBinder.Eval
(Container.DataItem,"Desn") %></a>

</ItemTemplate>

<ItemStyle HorizontalAlign="Center" />

</asp:DataList>

</marquee>

Next, let’ take a short look at the initialization of this module.

protected void Page_Load(object sender, EventArgs e){

if(!Page.IsPostBack) {

BindNewsData();

}

}

private void BindNewsData(){

///Define the class that gets the data

News news = new News();

SqlDataReader dr = news.GetNewss();

///Set the control's data source

NewsList.DataSource = dr;

///bind data to the control

NewsList.DataBind();

///Close the database connection

dr.Close();

}

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.

Ajaxifying the Operation Module

Ajaxifying the 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.

protected void Page_Load(object sender, EventArgs e){

if(Session["UserID"] != null && Session["RoleID"] != null){

OperationPanel.Controls.Clear();

if(Session["RoleID"].ToString() == "1") {

OperationPanel.Controls.Add(Page.LoadControl
("~/UserControl/AdminOperationUC.ascx"));

}

if(Session["RoleID"].ToString() == "2") {

OperationPanel.Controls.Add(Page.LoadControl
("~/UserControl/CustomerOperationUC.ascx"));

}

if(Session["RoleID"].ToString() == "3"){

OperationPanel.Controls.Add(Page.LoadControl
("~/UserControl/MyOperationUC.ascx"));

}

}

if (Session["UserName"] != null) {

logged.Text = "Welcome:" + Session["UserName"].ToString();

logged.Visible = true;

unlogged.Visible = false;

LogoutBtn.Visible = true;

LoginBtn.Visible = false;

}

}

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 "Super Administrator", 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:

private void ShowMessage(string sMsg){

//Response.Write("<script>window.alert('" + sMsg + "')</script>");

ScriptManager.RegisterStartupScript(Page, GetType(), "MyScript1",

"alert('" + sMsg +"');", true);

}

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.

Notification Module

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:

<%=Body%>&nbsp;&nbsp;<a href="../Desktop/ViewNotify.aspx"
target="_blank"><span style="color: #ff0000">Details...</span></a>

Now let’s continue to see the initialization of the control:

public partial class UserControl_NotifyUC : System.Web.UI.UserControl{

protected string Body = "";

protected void Page_Load(object sender, EventArgs e){

BindNotifyData();

}

private void BindNotifyData(){

///define the class that gets the data

Notify notify = new Notify();

SqlDataReader dr = notify.GetNotify();

///Read the data

if(dr.Read()) {

Body = dr["Body"].ToString();

if(Body.Length > 100){

Body = Body.Substring(0,100);

}

}

///Close the database connection

dr.Close();

}

}

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.

Customer/Supplier Functionality Module

Customer Functionality Module

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:

<a href="../Desktop/Cart.aspx">My Shopping Cart</a>

<a href="../Desktop/Order.aspx">My Order</a>

<a href="../Admin/User/UserInfo.aspx" target="_blank">My Personal Info</a>

<a href="../Admin/User/EditUserPwd.aspx">Modify Password</a>

<a href="../Desktop/leaveword.aspx">Leave Word</a>

Supplier Functionality Module

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:

<a href="../Admin/Product/ProductMain.aspx">Product Management</a>

<a href="../Admin/Product/Category.aspx">Category Management</a>

<a href="../Admin/User/UserInfo.aspx" target="_blank">My Personal Info</a>

<a href="../Admin/User/EditUserPwd.aspx">Modify Password</a>

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’

Loading Foreground Functionality Modules

Loading the Foreground Functionality Modules

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:

<%@ Register Src="../UserControl/OperationUC.ascx" TagName="OperationUC"
TagPrefix="ucOperation" %>

<%@ Register Src="../UserControl/NotifyUC.ascx" TagName="NotifyUC"
TagPrefix="ucNotify" %>

<%@ Register Src="../UserControl/NewsUC.ascx" TagName="NewsUC"
TagPrefix="ucNews" %>

……

<ucOperation:OperationUC ID="MyOperationUC" runat="server" />

<ucNotify:NotifyUC id="MyNotifyUC" runat="server"></ucNotify:NotifyUC>

<ucNews:NewsUC id="MyNewsUC" runat="server"></ucNews:NewsUC>

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:

1. 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.
   
2. 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.
   
3. 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.
   
4. 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.