Real-Time Search Behavior Guidance | Real-Time Search QuickStart | Patterns related to search

RealTimeSearchMonitor Control

To implement real-time search behavior in a search form, you must be able to detect user input as the user enters data in input controls. The ASP.NET TextBox control exposes the TextChanged event, which is raised as the user leaves the text area if the current text differs from any previously entered text. Even though this event indicates that the text in the control has changed, it does not get raised until the text area loses the focus. This means that a postback will not be performed immediately as the user types. Instead, a postback will be done as the user leaves the control. This out-of-the-box behavior makes real-time search a non-trivial concept to implement, requiring developers to write custom client-side code.
The RealTimeSearchMonitor control allows developers to easily incorporate real-time search behavior into their Web applications. By using the RealTimeSearchMonitor control, developers can declaratively specify in markup code what input controls are to be monitored for user input, without the need to write custom client-side code. Whenever the user changes the value of any of the monitored controls, the RealTimeSearchMonitor control detects the user action and forces an asynchronous (partial) postback associated to an UpdatePanel control. During the partial postback, the user interface (UI) can be updated to present the search results to the user.

Note:
The RealTimeSearchMonitor control does not update the user interface to show the search results; instead, it monitors input controls and performs asynchronous postbacks when the user modifies the value of input controls. You must write code that runs on the postback to display the search results.

Requirements

To use the RealTimeSearchMonitor control, you must have a Web site or Web application project that has been configured to use the ASP.NET 2.0 AJAX Extensions.
The Web page that you want to add real-time search capabilities to must have at least one search input control and must contain an UpdatePanel control where the search results are displayed.

Using the Control

The following procedure describes how to use the RealTimeSearchMonitor control to add real-time search capabilities to a search form.

To use the control
  • In your Web site, add a reference to the RealTimeSearch.dll assembly.
  • Add the RealTimeSearchMonitor control to the Toolbox (this step is necessary only if you do not see the RealTimeSearchMonitor control in the Toolbox). To add the RealTimeSearchMonitor control to the Toolbox, right-click the Toolbox, and then click Choose Items. On the .NET Framework Components tab, click Browse, select the RealTimeSearch.dll assembly, and then click Open. In the list of components, select the RealTimeSearchMonitor control, and then click OK.
  • Drag a RealTimeSearchMonitor control to the Web page to which you want to add real-time search capabilities.
  • Open the Properties window for the control, as shown in Figure 1.
PropertiesWindow_RealTimeSearchMonitorControl.png
Figure 1
Properties window for the RealTimeSearchMonitor control.
  • Enter the ID of the UpdatePanel control where the search results are displayed in the AssociatedUpdatePanelID property.
  • Click the ellipsis in the ControlsToMonitor property to open the collection editor, as shown in Figure 2.
CollectionEditorForTheControlsToMonitorProperty.png
Figure 2
Collection editor for the ControlsToMonitor property.
  • For each input control that you want to be monitored, click Add and set the following properties:
    • TargetId. This is the ID of the input control to be monitored
    • (Optional) EventName. This is the name of the event of the input control that triggers an update in the associated UpdatePanel control. If no value is specified for this property, the default event of the control will trigger the update.
Note:
The RealTimeSearchMonitor control adds an AsyncPostBackTrigger to the associated UpdatePanel control at run time for each monitored control. The EventName property of the AsyncPostBackTrigger is set with the value you enter in the EventName property of the control to monitor.
  • Click OK to close the collection editor.
  • Set the Interval property. The Interval property defines how often (in milliseconds) the input control is checked to see if the value has changed.The following code extracted from the Real-Time Search QuickStart shows the markup of a fully configured RealTimeSearchMonitor control.
<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> 
  • Add event handlers for the input controls’ events that you want to monitor, and implement them in the code-behind file of your Web page. In the event handlers, you should execute the search query and display the result set inside the associated UpdatePanel control.
Note:
Typically, you subscribe to the TextChanged event of TextBox controls.

Note:
The RealTimeSearchMonitor control invokes the validators of the monitored controls before performing an asynchronous postback. If the validation fails for any of the input controls, the postback is not done.

Real-Time Search Behavior Guidance | Real-Time Search QuickStart | Patterns related to search

Last edited Nov 20, 2007 at 2:01 PM by ejadib, version 3

Comments

No comments yet.