Comment and Order Management for an ASP.NET AJAX Server-Centric Based Online Shopping Website

Product Comment Management

The product comment management functionality is accomplished through the "CommentManage.aspx." Its total functionalities can be listed as follows:

1. Show the comments in a table form. 
   
2. Delete comments.
   
3. View comments.

Interface

First, let’s take a look at the design-time snapshot for product comment management, as displayed in Figure 33.

Figure 33—the design-time snapshot for product comment management

As you can see from the above figure, only Ajax is leveraged. When the user clicks the "X" ImageButton in the GridView control to delete the selected comment, to give the user a very clear prompt asking whether or not to make the deletion, we use the ASP.NET AJAX Toolkit control namedConfirmButtonExtenderto pop up a dialog to gain this effect. Since the HTML code is very long, we’ll only look at the part directly related to what we're doing, as follows:

<asp:TemplateField HeaderText="Operation">

<ItemTemplate>

<asp:ImageButton id="deleteBtn" ImageUrl="~/images/delete.gif" AlternateText="Delete" runat="server"

CommandName="delete" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"CommentID") %>'/>

<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="deleteBtn" ConfirmText="Are you sure to delete the selected items?">

</ajaxToolkit:ConfirmButtonExtender>

</ItemTemplate>

<ItemStyle Width="10%" BorderWidth="1px" HorizontalAlign="Center" />

<HeaderStyle HorizontalAlign="Center" />

</asp:TemplateField>

From the above code, you can easily find out how the ConfirmButtonExtendercontrol is attached to the‘X’ ImageButton. Note that one of the benefits to using most of the ASP.NET AJAX Toolkit controls is that they are very easy to follow up, with no programming required. 

Since the coding behind is pretty easy to grasp and we still have a long way to travel we don’t plan to delve into this any more but leave this task to the sedulous readers.

Order Management

Order Management

This function is accomplished through the "OrderManage.aspx" page. As a whole, the functions can be enumerated as follows:

1. Display the order in table form. 
   
2. Submit the order. 
   
3. View the order.
   
4. View the products on the order.

Now, let’s look at the run-time snapshot, as shown in Figure 34.

Figure 34—the run-time snapshot of order management

Here, there is only a GridView control shown to the user with a few links at each line. If he clicks the order number or the "View Product" button he will be redirected to the "ViewOrder.aspx" page to view the detailed information about the order. In fact, there are two states on the "Order State" column, "Unsubmitted" and "Already Submitted." If the "Unsubmitted" state is shown, then a button titled "Submit Order" appears on the "Operation" column. Otherwise, this button is hidden and the "Order State" column is replaced with "Already Submitted" as displayed in Figure 34.

Initialization

Initialization

When the "OrderManage.aspx" page is initialized, the related OrderFormdata is bound to GridView "OrderView," i.e. showing the factual order data and its associated state.

protected void Page_Load(object sender, EventArgs e){

Session["UserID"] = 1;

///bind data to the control

if(!Page.IsPostBack) {

BindOrderData();

}

}

private void BindOrderData(){

///define the class that gets the data

OrderForm order = new OrderForm();

SqlDataReader dr = order.GetOrderFormByUser(Int32.Parse(Session["UserID"].ToString()));

///Set the control's data source

OrderView.DataSource = dr;

///bind data to the control

OrderView.DataBind();

///Close the database connection

dr.Close();

}

Since there are enough comments on nearly each line of code here, let’s continue to see how to commit the order.

Committing the Order

Committing the Order

When you click the "Submit Order" button on the "Operation" column in Figure 34. the corresponding order will be committed to the server-side database, and at the same time the "Order State" column state changes to "Already Submitted." This is accomplished entirely through the following code.

protected void OrderView_RowCommand(object sender,GridViewCommandEventArgs e)

{

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

///commit order

OrderForm order = new OrderForm();

order.CommitOrderForm(Int32.Parse(e.CommandArgument.ToString()));

///rebind data to the control

BindOrderData();

Response.Write("<script>alert('" + "You have succeeded in committed this order. Please safekeep you data!" + "');</script>");

}

}

Here, we first find the "commit" command via the CommandNameargument of the GridViewCommandEventArgs parameter. Then the commit operation is started by calling the CommitOrderForm member functionof the OrderForm class. And at last, the order data is rebound to display the current state of the order.