Fetch multiple values as Key Value pair in ASPNet AJAX AutoCompleteExtender

In this article I will explain with an example, how to use ASP.Net AJAX Control Toolkit AutoCompleteExtender in ASP.Net using C# and VB.Net.

Database

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

Download and install Northwind Database

Installing ASP.Net AJAX Control Toolkit

First, you have to download and install the AJAX Control Toolkit DLL.

Note: For more details, please 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 Library and then register on the Page as shown below.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

HTML Markup

The HTML Markup consists of:

ScriptManager – For enabling Ajax.

TextBox – For user Input.

HiddenField – For capturing CustomerId of selected Customer.

Button – For submitting the form.

AutoCompleteExtender – For displaying autosuggestion list.

The AJAX Control Toolkit AutoCompleteExtender consists of one client side event:

OnClientItemSelected – For selecting CustomerId to the HiddenField.

<asp:ScriptManager runat="server" EnablePageMethods="true"></asp:ScriptManager>

<asp:TextBox ID="txtCustomerSearch" runat="server"></asp:TextBox>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="SearchCustomers"

MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"

TargetControlID="txtCustomerSearch" FirstRowSelected="false" OnClientItemSelected="ClientItemSelected">

</cc1:AutoCompleteExtender>

<asp:HiddenField ID="hfCustomerId" runat="server" />

<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="OnSubmit" />

Namespaces

You will need to import the following namespaces.

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Services;

VB.Net

Imports System.Data.SqlClient

Imports System.Configuration

Imports System.Web.Services

Server Side Method

The following Web Method is used to populate the records from the Customers Table of the Northwind database.

This method accepts following parameters:

1. prefixText (string)

2. count (int)

Note: It is very important that you keep the signature of the method i.e. the name of the parameters is same as given, otherwise the method won’t work with AutoCompleteExtender.

The value of the TextBox field along with the CustomerId are inserted into a Generic List collection of string using the AutoCompleteExtender Item of ASP.Net AJAX Control Toolkit and then returned to the ASP.Net AJAX AutoCompleteExtender Control.

[WebMethod]

public static List<string> SearchCustomers(string prefixText, int count)

{

string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

using (SqlConnection con = new SqlConnection(constring))

{

string query = "SELECT CustomerId, ContactName FROM Customers WHERE ContactName LIKE @SearchText + '%'";

using (SqlCommand cmd = new SqlCommand(query, con))

{

cmd.Parameters.AddWithValue("@SearchText", prefixText);

con.Open();

List<string> customers = new List<string>();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

string item = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sdr["ContactName"].ToString(), sdr["CustomerId"].ToString());

customers.Add(item);

}

con.Close();

return customers;

}

VB.Net

Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)

Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Using con As SqlConnection = New SqlConnection(constring)

Dim query As String = "SELECT CustomerId, ContactName FROM Customers WHERE ContactName LIKE @SearchText + '%'"

Using cmd As SqlCommand = New SqlCommand(query, con)

cmd.Parameters.AddWithValue("@SearchText", prefixText)

con.Open()

Dim customers As List(Of String) = New List(Of String)()

Using sdr As SqlDataReader = cmd.ExecuteReader()

While sdr.Read()

Dim item As String = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(sdr("ContactName").ToString(), sdr("CustomerId").ToString())

customers.Add(item)

End While

End Using

con.Close()

Return customers

End Using

End Function

Client Side Events

Following JavaScript event is used to fetch the ID of the selected customer and set in the HiddenField.

function ClientItemSelected(sender, e) {

$get("<%=hfCustomerId.ClientID %>").value = e.get_value();

}

</script>

Fetching the Selected ID and Text server side

When Submit button is clicked, following event handler is executed.

Inside this event handler, the CustomerId and Customer Name are fetched using Request.Form collection and displayed in JavaScript Alert Message Box using RegisterStartupScript method.

protected void OnSubmit(object sender, EventArgs e)

{

string customerId = Request.Form[hfCustomerId.UniqueID];

string customerName = Request.Form[txtCustomer.UniqueID];

ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + customerName + "\\nID: " + customerId + "');", true);

}

VB.Net

Protected Sub OnSubmit(ByVal sender As Object, ByVal e As EventArgs)

Dim customerId As String = Request.Form(hfCustomerId.UniqueID)

Dim customerName As String = Request.Form(txtCustomer.UniqueID)

ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Name: " & customerName & "\nID: " & customerId & "');", True)

End Sub