Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Using the ASP.Net AJAX Control Toolkit
Registering ASP.Net AJAX Control Toolkit
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
HTML Markup
The following
HTML Markup consists of:
ScriptManager – For enabling
AJAX.
DropDownList - For selecting country.
TextBox – For displaying the selected country ContactName in the Textbox when a country is selected and the name is searched.
AutoCompleteExtender - For enabling
AutoComplete functionality in
TextBox.
Properties:
ServiceMethod – For searching Customers.
MinimumPrefixLength - For defining the minimum character required in TextBox to search customer.
CompletionInterval – It allows us to specify the delay in milliseconds before the autocomplete suggestions are displayed.
EnableCaching – Whether client side caching is enabled.
TargetControlID – It has been set with the Id of the
TextBox to which the
AutoComplete functionality will be applied.
UseContextKey - It enables the AutoCompleteExtender to pass a custom string parameter to the web method for dynamic result filtering.
FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.
Note: Here I have specified an additional parameter to the
ASP.Net AJAX AutoCompleteExtender Control marked in
YELLOW UseContextKey = "true". This parameter must be set to true in order to send the additional parameter
ContextKey.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:DropDownList ID="ddlCountries" runat="server">
<asp:ListItem Text="All Countries" Value="0"></asp:ListItem>
<asp:ListItem Text="Argentina" Value="Argentina"></asp:ListItem>
<asp:ListItem Text="Austria" Value="Austria"></asp:ListItem>
<asp:ListItem Text="Belgium" Value="Belgium"></asp:ListItem>
<asp:ListItem Text="Brazil" Value="Brazil"></asp:ListItem>
<asp:ListItem Text="Canada" Value="Canada"></asp:ListItem>
<asp:ListItem Text="Denmark" Value="Denmark"></asp:ListItem>
<asp:ListItem Text="Finland" Value="Finland"></asp:ListItem>
<asp:ListItem Text="France" Value="France"></asp:ListItem>
<asp:ListItem Text="Germany" Value="Germany"></asp:ListItem>
<asp:ListItem Text="Ireland" Value="Ireland"></asp:ListItem>
<asp:ListItem Text="Italy" Value="Italy"></asp:ListItem>
<asp:ListItem Text="Mexico" Value="Mexico"></asp:ListItem>
<asp:ListItem Text="Norway" Value="Norway"></asp:ListItem>
<asp:ListItem Text="Poland" Value="Poland"></asp:ListItem>
<asp:ListItem Text="Portugal" Value="Portugal"></asp:ListItem>
<asp:ListItem Text="Spain" Value="Spain"></asp:ListItem>
<asp:ListItem Text="Sweden" Value="Sweden"></asp:ListItem>
<asp:ListItem Text="Switzerland" Value="Switzerland"></asp:ListItem>
<asp:ListItem Text="UK" Value="UK"></asp:ListItem>
<asp:ListItem Text="USA" Value="USA"></asp:ListItem>
<asp:ListItem Text="Venezuela" Value="Venezuela"></asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtContactsSearch" runat="server" onkeyup="SetContextKey()"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers"
MinimumPrefixLength="2"
CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
TargetControlID="txtContactsSearch" UseContextKey="true"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">
</cc1:AutoCompleteExtender>
WebMethod (PageMethod)
The following
WebMethod is specified an additional parameter
contextKey which contains the value of the selected
Country from the
DropDownList.
Then, I am checking the value of the contextKey parameter and if it is not “0”, then I pass the value of the Country to the SQL query to filter the search based on UserName prefix and Country
If the value of the contextKey value is “0” then the search is performed only on the basis of UserName prefix parameter.
Finally, the value of the
ContextKey is set
Client Side via
JavaScript.
C#
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string>SearchCustomers(string prefixText, int count, string contextKey)
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
string cmdText = "select ContactName from Customers where " +
"ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
if (contextKey != "0")
{
cmdText += "and Country = @Country";
cmd.Parameters.AddWithValue("@Country", contextKey);
}
cmd.CommandText = cmdText;
cmd.Connection = conn;
conn.Open();
List<string> customers = new List<string>();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(sdr["ContactName"].ToString());
}
}
conn.Close();
return customers;
}
}
}
VB.Net
<System.Web.Script.Services.ScriptMethod(),
System.Web.Services.WebMethod()>
Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As List(Of String)
Dim conn As SqlConnection = New SqlConnection
conn.ConnectionString = ConfigurationManager _
.ConnectionStrings("constr").ConnectionString
Dim cmd As SqlCommand = New SqlCommand
Dim cmdText As String = "select ContactName from Customers where" &
" ContactName like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefixText)
If contextKey <>"0" Then
cmdText = cmdText + " and Country = @Country"
cmd.Parameters.AddWithValue("@Country", contextKey)
End If
cmd.CommandText = cmdText
cmd.Connection = conn
conn.Open()
Dim customers As List(Of String) = New List(Of String)
Dim sdr As SqlDataReader = cmd.ExecuteReader
While sdr.Read
customers.Add(sdr("ContactName").ToString)
End While
conn.Close()
Return customers
End Function
Setting the value of the ContextKey
Here, I am setting the value of the
ASP.Net AJAX AutoCompleteExtender ContextKey using following
JavaScript function.
<script type="text/javascript">
function SetContextKey() {
$find('AutoCompleteExtender1').set_contextKey($get("<%= ddlCountries.ClientID%>").value);
}
</script>
<asp:TextBox ID="txtContactsSearch" runat="server" onkeyup="SetContextKey()"></asp:TextBox>
Screenshot
Downloads