Adding Comments and Search to an ASP.NET AJAX Server-Centric Based Online Shopping Website

Making comments on the Products

This function is performed through the "comment.aspx" page. Let’s take a quick look at the related design-time snapshot, as illustrated in the following Figure 19.

Figure 19—the design-time snapshot for making comments

Apparently, this is a simple yet representative design concerning the ASP.NET AJAX server-centric pages. At the top lies the ScriptManager controlto schedule the relations between ASP.NET and the MS AJAX framework itself. The middle part is a GridView circled by the UpdatePanel controlto gain the partial update effect as the GridView control changes its contents. The lower part is two TextBox controls for the user to populate with his comments. At the bottom are two buttons: "Submit my comment" for submitting the comment and "Close" for closing the current browser window.

There are two points here worth pointing out. First, we purposely omit the utilization of ASP.NET AJAX server control namedUpdateProgessand the ASP.NET AJAX Control Toolkit Extender control namedUpdatePanelAnimation,both here and in the rest of this sample, partially to save  writing time. Second, despite the scope of the UpdatePanel controlwe can still not securely use the sentence we mentioned earlier: ‘Response.Write(“<script>…</script>”);’.

Now, let’s omit the analysis of binding data to the GridView "CommentView," but leave room for submitting the comment. Clicking the "Submit my comment" button will trigger the SureBtn_Click event handler. The following shows the related code:

protected void SureBtn_Click(object sender,EventArgs e){

if(Session["UserID"] == null) {

ScriptManager.RegisterStartupScript(up1, typeof(UpdatePanel),
"ScriptName1", "alert('Not logged in. Please login first!')", true);

return;

}

Comment comment = new Comment();

comment.AddComment(Desn.Text,Body.Text,nProductID,Int32.Parse(Session
["UserID"].ToString()));

///rebind data

BindCommentData(nProductID);

}

protected void ReturnBtn_Click(object sender,EventArgs e){

Response.Write("<script>window.close();</script>");

}

Note here in the SureBtn_Click function, we still use the static method named RegisterStartupScriptof ScriptManagerto report to the user an error message instead of using the ‘Response.Write(“<script>…</script>”);’sentence, or else you will surely meet the error shown in the following Figure 20.

Figure 20—the typical error message when ‘Response.Write(…)’ conflicts with UpdatePanel

In contrast, in the event handler for the "ReturnBtn" button, we have used ‘Response.Write("<script>window.close();</script>");’. To our astonishment, there is nothing wrong and the page closes in the normal way. Why? According to the result of my simple study, if you use ‘Response.Write()’to directly write JavaScript functions such as alert()to the page during the course of a asynchronous postback, these functions often do not run as expected and even result in some error. Therefore, in the first function above if we use ‘Response.Write()’ instead of ‘ScriptManager.RegisterStartupScript(…)’, then the asynchronous postback action triggered by the subsequent sentences will of course lead to the error in Figure 20. However, in the second function, there is only one simple sentence ‘Response.Write()’, this of course will not result in an error occurring.

Leaving Words

Leaving Words

First note that leaving words is different from making comments on the specified goods. In our sample, this function is only available to common customers. By providing this function the website can find out the users’ requirements in time to accelerate the development of the website.

Here, since this function is performed through a common ASP.NET page, we only show you the design-time snapshot in Figure 21. As for the code behind please refer to the source code you can download through a link on the first page of this article.

Figure 21—the design-time layout of page ‘leaveword.aspx’ for the customers to leave words

Searching Products

The searching function is typically supported in most web applications in real scenarios. Here, we have also provided two kinds of search function: simple search and advanced search.

Simple Search

The simple search only aims to retrieve products from the server side database according to the product name provided. The related web page in design-time is shown in Figure 22, as follows.

Figure 22—the design-time layout for simple search

As is shown in the above Figure 22, this page is very simple, with a TextBoxWatermarkExtendercontrol to decorate the textbox control for the user to enter the product name as the search keyword. At the bottom is an ASP.NET GridView control which is surrounded by an UpdatePanelcontrol that aims to achieve the partial refreshing effect. The middle button, "Search," will invoke the search action and trigger partial refreshing of the GridView control with newly-retrieved data. Here, still for brevity, we omit the related simple analysis.

Now let’s examine the advanced search function.

Advanced Search

Advanced Search

In contrast to the simple search, the advanced search supplies many search conditions so that the user can more precisely match and find the desired goods. There are four conditions in total for the user to use: product name, the name of the manufacturer of the product, the purchase data, and the sale price of the product. The following Figure 23 shows one of the run-time snapshots for advanced research.

Figure 23—the run-time snapshot for advanced search

Here, there are two points worth noting. First, at the bottommost part of this page lies the GridView control enclosed by the UpdatePanel control, which is used to display the advanced search results. For the convenience of the users to input datetime data, we resort to the ASP.NET Calendarcontrol. However, that’s not all of the game! To achieve this result, we further seek help from the ASP.NET AJAX server control named PopupControlExtenderand UpdatePanel. The following gives the related HTML code:

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

Between<asp:TextBox ID="MinDate" runat="server" CssClass="InputCss"
Width="150px"></asp:TextBox>

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Calendar ID="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

<ajaxToolkit:PopupControlExtender PopupControlID="Panel1"
ID="PopupControlExtender1" runat="server" TargetControlID="MinDate">

</ajaxToolkit:PopupControlExtender>

And

<asp:TextBox ID="MaxDate" runat="server" CssClass="InputCss"
Width="150px"></asp:TextBox>

<asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>

<asp:Calendar ID="Calendar2" runat="server"
OnSelectionChanged="Calendar2_SelectionChanged"></asp:Calendar>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

<ajaxToolkit:PopupControlExtender PopupControlID="Panel2"
ID="PopupControlExtender2" runat="server" TargetControlID="MaxDate">

</ajaxToolkit:PopupControlExtender>

</td>

As you can imagine, the PopupControlExtenderacts as the base of the Panel controlwithin which is wrapped the Calendarcontrol. Thus, when the user clicks on the datetime textbox area, with the help of the PopupControlExtender controlthe Calendarcontrol pops up for the user to select the datetime. As for the UpdatePanelcontrol, it helps to gain the partial refresh effect.

Advanced Search continued

In addition, we should notice that we’ve designed the "advanced search" function just for integrity, for it only searches goods that must meet the four given conditions at the same time, as is proved by the following SQL script for the stored procedure (i.e. Pr_AdvanceSearchProduct) we need here.

ALTER PROCEDURE Pr_AdvanceSearchProduct(

@Name varchar(200),

@Sell varchar(200),

@MinDate datetime,

@MaxDate datetime,

@MinPrice money,

@MaxPrice money

)

AS

SELECT

*

FROM

Product

WHERE

Name like '%' + @Name + '%' AND Sell like '%' + @Sell + '%'

AND SellInDate >= @MinDate AND SellInDate <= @MaxDate

AND OutPrice >= @MinPrice AND OutPrice <= @MaxPrice

Next, after the use populates the searching data and click button ‘Start to search…’, the following event handler will be invoked:

protected void CommitBtn_Click(object sender,EventArgs e){

Product product = new Product();

DataSet ds = new DataSet("Product");

ds.Tables.Add(product.AdvanceSearchProduct(Name.Text,Sell.Text,

DateTime.Parse(MinDate.Text),DateTime.Parse(MaxDate.Text),

Decimal.Parse(MinPrice.Text),Decimal.Parse(MaxPrice.Text)));

ProductView.DataSource = ds;

ProductView.DataBind();

ProductView.Visible = ProductView.Rows.Count <= 0 ? false : true;

lblHint.Visible = ProductView.Rows.Count <= 0 ? true : false;

}

Apparently, the key lies in the member function named AdvanceSearchProductof the Product class, which further calls the above mentioned stored procedure Pr_AdvanceSearchProductto finish the research. By attaching the result dataset to the ProductView control and making it visible we finally see the results as shown in the above Figure 23.