Real-Time Search Behavior Guidance | RealTimeSearchMonitor control | Patterns related to search

Real-Time Search QuickStart

The Real-Time Search QuickStart demonstrates how to use the RealTimeSearchMonitor control to add real-time search capabilities to a search form in a View-Presenter scenario.

Note:
The Real-Time Search QuickStart solution uses the Composite Web Application Block as the base infrastructure and demonstrates how to use the RealTimeSearchMonitor control in a view that implements the View-Presenter pattern. However, the concepts demonstrated apply to typical Web applications, even to applications that do not implement the View-Presenter pattern.

Building and Running the QuickStart

The QuickStart ships as source code, which means you must compile it before running it. This QuickStart requires the Microsoft ASP.NET 2.0 AJAX Extensions to be installed.

To build and run the QuickStart
  1. Open the solution file RealTimeSearchQuickstart.sln.
  2. On the Build menu, click Rebuild Solution.
  3. Press F5 to run the QuickStart.

Business Scenario

The QuickStart contains a customer search form. This form is used to search for customers in a repository in a structured manner; this is, by specifying a search criterion for different fields of a customer entity. The user can enter search criteria for the fields Name, City, State, and Postal Code. To improve the search experience, the search form leverages the real-time search technique to display the search results as the user enters values in the input controls of the search form. Figure 1 illustrates the Search Customer form.
SearchCustomerForm.png
Figure 1
Search Customer form.

Walkthrough

Perform the following steps to see the real-time search behavior of the QuickStart.

To see the real-time search behavior
  1. Run the QuickStart.
  2. On the Search Customer page, enter values in the input fields Name, City, State and/or Postal Code; the search results will appear as you type.
  3. For example, type B in the Name field; you will get twenty results. After the "B," type an o; you will get four results. Append the letter n, and the result set will be reduced to two results. Finally, append the letter d; you will see one result. Figure 2 illustrates the search results after you type Bo.
SearchResultsDisplayedAsYouTypeInTheInputControls.png
Figure 2
Search results are displayed as you type in the input controls.

Note:
The Search Customer form includes a progress indicator to indicate that the search is in progress. The progress indicator might not appear in the page if the search results are displayed too quickly. In that case, you can manually add a delay to the search to see the progress indicator. To do this, open the file DevelopmentWebsite\CustomerManager\SearchCustomer.aspx.cs and follow the instructions commented out in the CompanyNameTextBox_TextChanged method.

Acceptance Tests

This bundle includes a separate solution with the acceptance tests for the Real-Time Search QuickStart. The acceptance tests describe how the QuickStart should perform when you follow a series of steps; you can use the acceptance tests to explore the functional behavior of the Real-Time Search QuickStart in a variety of scenarios.
The acceptance tests were developed using the testing framework WatiN. To run the tests, you need to have WatiN installed.

To run the acceptance tests
  1. Open the solution file RealTimeSearchQuickstart_FunctionalTests.sln.
  2. Fix the references to Interop.SHDocVw.dll, Rhino.Mocks.dll, and WatiN.Core.dll assemblies in the RealTimeSearchQuickstart_FunctionalTests project.
  3. Run the tests using the Test Manager.

Implementation Notes

This QuickStart highlights the code required to use the RealTimeSearchMonitor control in a View-Presenter scenario. The following are the key artifacts in the QuickStart:
  • Search Customer Web Page (DevelopmentWebsite\CustomerManager\SearchCustomer.aspx). This view contains a customer search form that uses the RealTimeSearchMonitor control to add real-time search capabilities to it.
  • Customer Service (CustomerManager\Services\CustomerService.cs). This is a business component that interacts with an in-memory customer data source to perform searches based on the search criteria defined by the user.

Search Customer Web Page

The Search Customer Web page (DevelopmentWebsite\CustomerManager\SearchCustomer.aspx) uses a RealTimeSearchMonitor control to add real-time search capabilities to the search form. The page contains the following key elements:
  • Search input controls. The input controls included allow users to enter search criteria for the fields Name, City, State, and Postal Code.
  • A Search button. Users can click this button to force a search submission
  • An Update Panel control. The UpdatePanel control contains a GridView named CustomersGridView where the search result set is displayed. The GridView is configured to allow paging, and the page size is set to ten elements.
  • An ObjectContainerDataSource control. The GridView consumes this data source to obtain the items to display. The control performs custom (server-side) paging
  • A RealTimeSearchMonitor control. This control monitors the input controls in the search form and performs a partial postback as the user types in any of the controls. The following lines of code show the markup code for the control. Note that it specifies the ResultsUpdatePanel control (this is the UpdatePanel that contains the CustomersGridView) for the AssociatedUpdatePanelID property and the following controls to be monitored for user input:
    • CompanyNameTextBox
    • CityTextBox
    • StateDropDown
    • ZipCodeTextBox
<rts:RealTimeSearchMonitor ID="CustomerRealTimeSearchMonitor" runat="server" Interval="700" AssociatedUpdatePanelID="ResultsUpdatePanel">
    <ControlsToMonitor>
        <rts:ControlMonitorParameter TargetId="CompanyNameTextBox" />
        <rts:ControlMonitorParameter TargetId="CityTextBox" />
        <rts:ControlMonitorParameter TargetId="StateDropDown" />
        <rts:ControlMonitorParameter TargetId="ZipCodeTextBox" />
    </ControlsToMonitor>
</rts:RealTimeSearchMonitor> 
  • An UpdateProgress control. This control is used to display a progress indicator while the search is being executed. Figure 3 illustrates the UpdateProgress control designer.
UpdateProgressControl.png
Figure 3
UpdateProgress control.

The following markup code shows the declaration of the control.

<asp:UpdateProgress ID="SearchUpdateProgress" runat="server" DynamicLayout="False">
    <ProgressTemplate>
        <asp:Image ID="ProcessingImage" runat="server" ImageUrl="~/images/loading.gif" /> <strong>Searching...</strong>
    </ProgressTemplate>
</asp:UpdateProgress> 

Code-Behind File

The code-behind file for the Search Customers page (DevelopmentWebsite\CustomerManager\SearchCustomer.aspx.cs) contains event handlers for the events raised by the input controls in the search form. The RealTimeSearchMonitor control forces these events to be raised when the user modifies the value of any of the monitored input controls. The event handlers invoke the OnSearchCriteriaChange method on the presenter to indicate that the user has modified the search criteria, as shown in the following code.

protected void CompanyNameTextBox_TextChanged(object sender, EventArgs e)
{
    _presenter.OnSearchCriteriaChange();
}

protected void StateDropDown_SelectedIndexChanged(object sender, EventArgs e)
{
    _presenter.OnSearchCriteriaChange();
}

protected void ZipCodeTextBox_TextChanged(object sender, EventArgs e)
{
    _presenter.OnSearchCriteriaChange();
}

protected void CityTextBox_TextChanged(object sender, EventArgs e)
{
    _presenter.OnSearchCriteriaChange();
} 

The OnSearchCriteriaChange method initiates the search processing. To retrieve the values of the input controls in the view, the presenter queries read-only properties that the view contains to expose the values of each of the input controls. The following code shows the properties definition.

public string CompanyName
{
    get { return this.CompanyNameTextBox.Text; }
}

public string City
{
    get { return this.CityTextBox.Text; }
}

public string StateId
{
    get { return this.StateDropDown.SelectedValue; }
}

public string PostalCode
{
    get { return this.ZipCodeTextBox.Text; }
} 

When the search processing completes, the presenter invokes the method ShowCustomers to populate the view with the customers that match the search criteria. This method populates the ObjectContainerDataSource control of the page and displays the GridView that presents the search results. The following code is for the ShowCustomers method.

public void ShowCustomers(ICollection<Customer> customers)
{
    CustomersContainerDataSource.DataSource = customers;
    CustomersGridView.Visible = true;
} 

Customer Service

The customer service (CustomerManager\Services\CustomerService.cs) is a service that has a single method named GetCustomers that returns a collection of customers that matches particular search criteria. The following code shows the GetCustomers method signature as defined in the ICustomerService interface.

public interface ICustomerService
{
    // ...
    ICollection<Customer> GetCustomers(string companyName, string stateId, string postalCode, string city, int startRowIndex, out int totalCount);
} 

The GetCustomers method receives as parameters the search criteria for the company name, the state, the postal code, and the city. It also declares two additional parameters, startRowIndex and totalCount, which are used to paginate the results. The parameter startRowIndex indicates the first record of the page to be returned, and totalCount returns the amount of results returned (it is an output parameter).

Real-Time Search Behavior Guidance | RealTimeSearchMonitor control | Patterns related to search

Last edited Nov 20, 2007 at 12:59 PM by ejadib, version 3

Comments

No comments yet.