In this article I will explain with an example, how to pass additional parameter to WebService or WebMethod using ASP.Net AJAX Control Toolkit AutoCompleteExtender Control.
 
 

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
 
 

Using the ASP.Net AJAX Control Toolkit

First you have to download and install the AJAX Control Toolkit DLL. For more details, refer my article Install AJAX Control Toolkit in Visual Studio ToolBox.
 
 

Registering ASP.Net AJAX Control Toolkit

In order to use ASP.Net AJAX Control Toolkit controls, you will need to add reference of AJAX Control Toolkit Control Toolkit Library and then register on the Page as shown below.
<%@ 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 StringByVal count As IntegerByVal 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>
 
Then 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

ASP.Net AJAX AutoCompleteExtender: Pass Additional Parameter to WebMethod using ContextKey
 
 

Downloads