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.