Back-end Management Tasks for an ASP.NET AJAX Server-Centric Based Online Shopping Website

Product Category Management

This part is done through the "Category.aspx" page. The following outlines the functionalities it will accomplish:

1. Show the product category info in control TreeView.
   
2. Provide the hyperlinks to add a new product category. 
   
3. Provide the hyperlinks to modify the product categories. 
   
4. Delete the specified product category. 
   
5. Move the selected category upward. 
   
6. Move the selected category downward.

The Interface Design

The following Figure 27 shows the design-time snapshot for product category management.

Figure 27—the design-time snapshot for product category management

As you can see from the above figure, this will involve some typical tree control operations: adding, modifying, deleting, and moving the tree nodes.

Initialization

When the "category.aspx" page is first initialized, it should be able to display the present product categories in the TreeView control. And at the same time it should check whether or not the five Button controls in the page are enabled. Finally, it should attach a confirm dialog to the "Delete" button.

protected void Page_Load(object sender,EventArgs e){

if(!Page.IsPostBack){

BindCategoryData();

}

///set the availability of the button

AddBtn.Enabled = UpBtn.Enabled = DownBtn.Enabled = EditBtn.Enabled =
DeleteBtn.Enabled

= CategoryView.SelectedNode == null ? false : true;

///add the dialog that confirms the user to make the deletion

DeleteBtn.Attributes.Add("onclick","return confirm('Are you sure to delete
the selected items?');");

}

private void BindCategoryData(){

Category category = new Category();

category.BindCategoryTreeView(CategoryView,true,"-1");

}

Again, there are already enough comments provided here. The core work is done using the BindCategoryData helper function,which in turn invokes one of the important methods—BindCategoryTreeViewof the Category class. However, still for brevity, we do not delve into this method; you can refer to the "Category.cs" file under the App_Code folder that accompanies the downloadable source code (it provides a series of typical ASP.NET TreeView control operations).

Moving Tree Nodes

Moving the Tree Nodes

Here, we merge the two click event handlers for the "Move Upward" and "Move Downward" buttons together into one, as is indicated in the following code:

protected void MoveBtn_Click(object sender,EventArgs e){

string sCommandName = ((Button)sender).CommandName;

if(CategoryView.SelectedNode == null) {

Response.Write("<script>window.alert('Please select the item.')
</script>");

return;

}

///define the class

Category category = new Category();

///edit data

category.UpdateCategoryOrder(Int32.Parse
(CategoryView.SelectedNode.Value),sCommandName);

BindCategoryData();

}

Obviously, the user must first select one of the tree nodes, and then click the related button, or he will get a corresponding warning. Note the moving operation is in fact to sort the product categories. If the category node is selected and the moving button is clicked, then the UpdateCategoryOrder methodof the Categoryclass is invoked to accomplish the related movement.

Deleting the Tree Nodes

Here’s the code related to the deletion operation.

protected void DeleteBtn_Click(object sender,EventArgs e){

if(CategoryView.SelectedNode == null){

Response.Write("<script>window.alert('Please select the item.')</script>");

return;

}

if(CategoryView.SelectedNode.ChildNodes.Count > 0){

Response.Write("<script>window.alert('The node you are to delete still
includes sub nodes and cannot be deleted!')</script>");

return;

}

///define the class

Category category = new Category();

///delete data

category.DeleteCategory(Int32.Parse(CategoryView.SelectedNode.Value));

BindCategoryData();

///display the info of the operating result

//Response.Write("<script>window.alert('You have succeeded in deleting
data.')</script>");

}

As with the moving operation above, only if the related node is selected can the node be deleted; otherwise, the user will still receive a warning. Note here if the selected node has its child nodes, then it can not be deleted, i.e. the user can only directly delete the leaf node on the tree.

Please note here that we've chosen to leave out discussion of the adding and modifying categories operations.

Product Management

Product Management

Now it’s time to switch to another topic: product management. Note that these kinds of modules can be handled by both the super administrator and supplier roles. In detail, this part of the program's function is mainly composed of three pages: "ProductMain.aspx," "ProductManage.aspx" and "ProductLeft.aspx." Generally speaking, the product management function can be further divided into the following sub functionalities:

1. Show the product category info in control TreeView.
   
2. Show all the related products according to the selected product category.
   
3. Provide the hyperlinks to modify the product info.
   
4. Provide the hyperlinks to add new products.
   
5. Provide the hyperlinks to manage the product comments.
   
6. Delete the specified product.
   
7. View the selected product info.

ProductMain.aspx—the Main Page for Product Management

Author's Note: To partially update a web page there are several solutions besides AJAX. Here (and only here), we will leverage the <frame> mechanism to achieve the local updating effect. As for the <frame> solution, there a good many pros and cons about it. The "pros" mainly focus on the local updating effect to be introduced here while the "cons" mainly concern some kind of side effect associated with the search engine algorithm. Even so, there are still thousands of famous websites leveraging this technique.

To make a simple comparison, we painstakingly put the <frame> solution into use in this part. Thus, just for your reference!

To carefully study this page, let’s first take a look at its HTML code, as follows:

……(left out)

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untiled</title>

</head>

<frameset id="thisFrame" cols="180,*" rows="*" border="0"
framespacing="0">

<frame name="LeftFrame" src="ProductLeft.aspx" scrolling="no"
frameborder="0" noresize>

<frame name="MainFrame" src="ProductManage.aspx" scrolling="auto"
frameborder="0">

</frameset>

</html>

Here, there are two <frame> elements (LeftFrameand MainFrame) enclosed by a <frameset> element, with each linking to, or more precisely "loading," another two pages— "ProductLeft.aspx" and "ProductManage.aspx." Figure 28 shows the design-time snapshot for the "ProductLeft.aspx."

Figure 28—the design-time snapshot for the "ProductLeft.aspx" page 

There is mainly a TreeView control on this page that bears the responsibility of displaying the product category info. The initialization of the page that performs the task of binding data to the tree control is also simple:

protected void Page_Load(object sender,EventArgs e){

if(!Page.IsPostBack) {

BindCategoryData();

}

}

private void BindCategoryData(){

Category category = new Category();

category.InitCategory(CategoryView,"ProductManage.aspx");

}

The Product Manage Page

The really important page is "ProductManage.aspx" (Figure 29) which accomplishes the above mentioned functions from step 3 to 7. Now, let’s look more closely into it.

Figure 29—the design-time snapshot for page ‘ProductManage.aspx’

The layout of this page is simple, with only two controls on it—a GridView to provide the functionalities of viewing, modifying, and deleting products as well as managing the product comments, and a button responsible for adding new products.

Because the initialization of the page is very simple (or at least similar to those in other discussed modules), we will bypass it, but directly switch to discussing the deletion operation.

First, let’s see the related code:

protected void ProductView_RowDataBound(object sender,GridViewRowEventArgs
e)

{

///find the 'Delete' button

ImageButton deleteBtn = (ImageButton)e.Row.FindControl("DeleteBtn");

if(deleteBtn != null)

{ ///add the dialog that confirms the user to make the deletion

deleteBtn.Attributes.Add("onclick","return confirm('Are you sure to delete
the selected item?');");

}

}

protected void ProductView_RowCommand(object
sender,GridViewCommandEventArgs e){

if(e.CommandName == "delete") {

///delete data

Product product = new Product();

product.DeleteProduct(Int32.Parse(e.CommandArgument.ToString()));

///rebind data to the control

BindProductData(nCategoryID);

Response.Write("<script>alert('" + "Deleting successfully. Please safekeep
your data!" + "');</script>");

}

}

When clicking the ImageButton ‘X’in the product line inside the GridView control, the selected product can be deleted. Of course before the deleting action, there first appears a dialog asking the user to make a further decision, as is achieved in the above function named ProductView_RowDataBound. In this function, we first find the ‘X’ button. If the button exists, then we attach a confirm dialog to it for later use.

Next, when the user clicks button ‘X’ on each line the ProductView_RowCommandevent of the GridView ProductViewwill be triggered to delete the current selected product. In the above function, we first obtain the value of the CommandName parameterof a GridViewCommandEventArgsobject. If it equals "delete," then start the deletion operation, or else, just return.

Adding New Product

Adding a New Product

Before we start to discuss this function, let’s first see a snapshot of "ProductMain.aspx" (Figure 30) which is captured when the "Books" node is clicked.

Figure 30—one of the run-time snapshots for product management

Now, when the user clicks the "Add a New Product" button at the bottom, he will be navigated to another page, "AddProduct.aspx." The following Figure 31 shows one of its run-time snapshots.

Figure 31—one of the run-time snapshot for adding product

In designing this page, we’ve only used a little AJAX magic, as indicated from the above figure. For the user to more easily enter datetime data we provide him with an ASP.NET Calendarcontrol. How do we pop up the calendar control? One of the solutions is to resort to the ASP.NET AJAX Toolkit control named PopupControlExtender. How do we achieve the partial update effect when the user selects a new datetime from the calendar? For this, of course, we should seek help from the UpdatePanel.

Now, let’s leap over the page initialization and examine the adding function. The following code shows the related click event handler for the "OK" button.

protected void SureBtn_Click(object sender,EventArgs e){

int nMaxPictureID = -1;

//first insert image data into Pictures table then insert into Product
with the known PictureID

if (FileUpload1.PostedFile != null&& FileUpload1.PostedFile.FileName != "")

{

byte[] myimage = new byte[FileUpload1.PostedFile.ContentLength];

HttpPostedFile Image = FileUpload1.PostedFile;

Image.InputStream.Read(myimage, 0, (int)
FileUpload1.PostedFile.ContentLength);

Picture pic = new Picture();

try{

nMaxPictureID=pic.AddPicture("Image for product " + Name.Text,
FileUpload1.PostedFile.ContentType, myimage);

}

catch (SqlException SQLexc) {

Response.Write("Insert Failed. Error Details are: " + SQLexc.ToString());

return;

}

}

Product product = new Product();

///add data

product.AddProduct(Name.Text,nCategoryID,Desn.Text,Sell.Text,

DateTime.Parse(CreateDate.Text),DateTime.Parse(SellInDate.Text),

Unit.Text,Int32.Parse(Quantity.Text),Int32.Parse(Upper.Text),

Int32.Parse(Lower.Text),Decimal.Parse(InPrice.Text),

Decimal.Parse(OutPrice.Text), nMaxPictureID, Remark.Text);

///display the info of the operating result

Response.Write("<script>window.alert('You have succeeded in adding data.')
</script>");

}

There are three things happening here. First, by clicking the FileUploadcontrol we browse and get the image file name. Then we dissect it, abstract the image data, store them into a byte array, and finally by invoking the AddPicture methodof the Picture classwe write the image data into the imagetyped field in the Pictures table. Second, we create an instance of the Product classand by calling its AddProductmethod we finally store all of the product info in the server-side database. Third, after everything is okay, we call "Response.Write(…)" 

Will anything wrong be triggered due to the above UpdatePanel? No, it won’t. This is because it’s the last sentence—before this invocation all the possible asynchronous postbacks have taken place.

When you click the "Edit" hyperlink in the above Figure 31, you will be navigated to another page, "EditProduct.aspx," to modify the selected product (where of course you can change the image file). Since the general logic of it is quite similar to the above "AddProduct.aspx" page, we don’t plan to examine the modifying function any further.

About Viewing Products

About Viewing Products

Finally, when you click the hyperlink that relates to the product name in the "ProductManage.aspx" page, you will be redirected to the "ProductInfo.aspx" page to view the detailed info about the selected product. Here, we only talk about how to view the image of the product.

First, let’s see the related HTML code, as follows:

<tr style="height:30px;">

<td align="right" style="width:150px;height:30px;">

Picture:</td>

<td align="left" style="height: 100px;">

<asp:GridView ID="GridView1" runat="server" Height="1px" Width="218px" AutoGenerateColumns="False">

<Columns>

<asp:TemplateField >

<ItemTemplate>

<asp:Image ID="ProductPicture" Runat="server" Width="90" Height="80"
ImageUrl='<%# Eval("PictureID", "../../Handler.ashx?Id={0}") %>' >

</asp:Image>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:Button ID="btnShow" runat="server" Text="Display Image"
OnClick="btnShow_Click" />

</td>

</tr>

As has been pointed out in the previous section, to show an image/picture on a web page in a specified position was once very different. But now with the introduction of the new HTTP handler file ".ashx," this problem can be solved relatively easily. Here, we use an ASP.NET GridView control to anchor the position. And then, by using the ASP.NET Imagecontrol and letting its ImageUrlparameter point to a special "Handler.ashx?Id=… " URL and programming the  "Handler.ashx" file, we finally achieve the result of displaying the image on the screen.

The following Figure 32 shows part of the design-time snapshot for showing the image data.

Figure 32—the design-time snapshot for showing image data

Last but not least, only by clicking the "Display Image" can you see the image. If you do not click the button, you will not see the image.