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

(Page 3 of 4 )

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.

Next: Advanced Search continued >>
 

More ASP.NET Articles
More By Xianzhong Zhu

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

>>> Be the FIRST to comment on this article!