Real-Time Search

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

Building and Running the QuickStart

The Real-Time Search QuickStart ships as source code, which means you must compile it before running it. This QuickStart requires the following components to be installed:

• Microsoft ASP.NET AJAX Library 3.5
• Microsoft .Net Framework 3.5

The following procedure describes how to build and run the QuickStart.

To build and run the QuickStart

1. Download and extract the source code.
2. Open the solution file RealTimeSearchQuickstart.sln.
3. On the Build menu, click Rebuild Solution.
4. Press F5 to run the QuickStart.

Business Scenario

The QuickStart contains a form that allows users to search for customers whose information is stored in a repository. Users specify 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 dynamically displays the search results as the user enters values in the search form’s input controls. Figure 1 illustrates the Search Customer form.

Figure 9

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.

   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.

   

   Figure 10

   Search results are displayed as you type in the input controls

   Note

   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.

Implementation Notes

This QuickStart highlights the code required to use the RealTimeSearchMonitor control in a Model-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 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 UpdatePanel 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"  Interval="700" AssociatedUpdatePanelID="ResultsUpdatePanel">
      <ControlsToMonitor>
          <rts:ControlMonitorParameter TargetId="CompanyNameTextBox" />
          <rts:ControlMonitorParameter TargetId="CityTextBox" />
          <rts:ControlMonitorParameter TargetId="StateDropDown" />
          <rts:ControlMonitorParameter TargetId="ZipCodeTextBox" />
      </ControlsToMonitor>
  </rts:RealTimeSearchMonitor>
  

  The default event for ControlMonitorParameter triggers an asynchronous server postback. Configure the EventName attribute to raise the trigger with another event. Only one event can be associated with a control to raise the trigger.

• An UpdateProgress control. This control displays a progress indicator while the search is being executed. Figure 3 illustrates the UpdateProgress control designer.

  

  Figure 11

  UpdateProgress control

  The following markup code shows the declaration of the control.

  <asp:UpdateProgress ID="SearchUpdateProgress"  DynamicLayout="False">
      <ProgressTemplate>
          <asp:Image ID="ProcessingImage"  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 OnSearchCriteriaChanged 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.OnSearchCriteriaChanged();
}

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

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

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

The OnSearchCriteriaChanged 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’ definitions.

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 CustomerService (CustomerManager\Services\CustomerService.cs) service 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, which is an output parameter, returns the number of results returned.