The Search Bundle as part of the Web Client Software Factory v2.0 includes a RealTimeSearchMonitor that helps provide real-time search functionality in your ASP.NET Applications using ASP.NET AJAX and partial-page updates. This tutorial shows you screenshots and code samples that will help you integrate the Search Bundle in your own applications.
The goal of this tutorial is to provide real-time search functionality for customers in the Customers Table of the Northwind Database by company name. The page looks as follows in design-view:
When a user types information into the Company TextBox the GridView Control in the UpdatePanel will automatically update itself with just customer's from a company name that match the information typed in as so:
The brains is the RealTimeSearchMonitor Control that monitors controls for changes in values and fires a partial-page postback if a change is detected. In this case, the RealTimeSearchMonitor Control is monitoring just one control, the CompanyNameTextBox Control:
<asp:TextBox
ID="CompanyNameTextBox"
OnTextChanged="CompanyNameTextBox_TextChanged"
runat="server" />
<rts:RealTimeSearchMonitor
ID="CustomerRealTimeSearchMonitor"
AssociatedUpdatePanelID="UpdatePanel1"
Interval="700"
runat="server">
<ControlsToMonitor>
<rts:ControlMonitorParameter
TargetId="CompanyNameTextBox" />
</ControlsToMonitor>
</rts:RealTimeSearchMonitor>
The RealTimeSearchMonitor kicks off an asynchronouse postback of a targeted UpdatePanel, in this case UpdatePanel1, that contains the GridView. The TextChanged Event is fired for the CompanyName, which goes and gets a new grid of data based on the information in the CompanyNameTextBox.
protected void CompanyNameTextBox_TextChanged(object sender, EventArgs e)
{
GridView1.DataSource =
CustomerDataSource.GetCustomers(CompanyNameTextBox.Text);
GridView1.DataBind();
}
The CustomerDataSource Class uses the Enterprise Library Data Access Application Block to get the new data. Don't write concatenated SQL like this in a production application as it makes it vulnerable to SQL Injection Attacks. I did it here quickly just to get the sample running:
public static IDataReader GetCustomers(string prefixText)
{
Database db = DatabaseFactory.CreateDatabase();
string sql = null;
if (string.IsNullOrEmpty(prefixText))
sql = "select * from customers";
else
sql = "select * from Customers WHERE CompanyName LIKE '"
+ prefixText + "%'";
return db.ExecuteReader(CommandType.Text, sql);
}
What is really nice about the RealTimeSearchMonitor Control is that it will monitor several controls for changes. You can find an example of that in the RealTimeSearchQuickstart that comes with the Search Bundle.
Very cool.