Here I am explaining, how to pass additional parameter to WebService or WebMethod using ASP.Net AJAX Control Toolkit AutoCompleteExtender Control.
Database
For this tutorial I am making use of NorthWind database that you can download using the link given below.
Connection String
Once database is downloaded you can attach the same to your SQL Server Instance. I am making use of SQL Server 2005 Express hence below is my Connection string.
<connectionStrings>
<add name="constr"connectionString="Data Source = .\SQLExpress;
Initial Catalog = Northwind; Integrated Security = true"/>
</connectionStrings>
AJAX Control Toolkit
Download the AJAX Control Toolkit DLL using the link below and add reference to your project.
Once that’s done register it on the ASPX page as given below
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
HTML Markup
<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:ScriptManager ID="ScriptManager1" runat="server"
EnablePageMethods = "true">
</asp:ScriptManager>
<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>
Above you will notice that there are following controls
ddlCountries -ASP.Net DropDownList Control to specify the Country (Additional Parameter) to the AJAX AutoCompleteExtender Control
txtContactsSearch - ASP.Net TextBox to which the AJAX AutoCompleteExtender is applied
AutoCompleteExtender1 - ASP.Net AJAX AutoCompleteExtender Control
Note: Above 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.
Server Side Code
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
Explanation:
Above you will notice that I have specified the an additional parameter contextKey which contains the value of the selected Country from the DropDownList.
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.
The value of the ContextKey is set Client Side via JavaScript.
Setting the value of the ContextKey
Below I am setting the value of the ASP.Net AJAX AutoCompleteExtender ContextKey using following JavaScript function.
<script type = "text/javascript">
function SetContextKey() {
$find('<%=AutoCompleteExtender1.ClientID%>').set_contextKey($get("<%=ddlCountries.ClientID %>").value);
}
</script>
The above JavaScript function is called on the onchange event of the ASP.Net TextBox control as shown below
<asp:TextBox ID="txtContactsSearch" runat="server" onkeyup = "SetContextKey()"></asp:TextBox>
Screenshot
Downloads
You can download the complete source code in VB.Net and C# using the download link provided below
Download Code
