In this article I will explain with an example, how to implement ASP.Net AJAX ComboBox Extender control of the ASP.Net Ajax Control Toolkit Library using C# and VB.Net.
The ASP.Net AJAX ComboBox Extender control allows user to combine the features of DropDownList and AutoComplete TextBox in one control.
 
 

Database

I have made use of the following table Customers with the schema as follows.
Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
I have already inserted few records in the table.
Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 

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 Library and then register on the Page as shown below.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
 

HTML Markup

The HTML Markup consists of an ASP.Net ScriptManager control, ASP.Net AJAX ComboBox Extender control and a Button.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<ajaxToolkit:ComboBox ID="cbCustomers" runat="server" AutoCompleteMode="SuggestAppend">
</ajaxToolkit:ComboBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
 
 

AutoCompleteMode Property of ASP.Net AJAX ComboBox Extender control

The AutoCompleteMode is used to enable AutoComplete mode for the ASP.Net AJAX ComboBox Extender control.
It has the following modes:-
1. Append – In this mode, as user types the suggestion is appended in the TextBox.
Example: As soon as letter M is typed, the whole word Mudassar Khan comes as a suggestion.
Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
2. Suggest – In this mode, as user types the suggestion is displayed in the DropDown as shown below.
Example: As soon as letter M is typed, the item Mudassar Khan is shown selected in the DropDown.
Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
3. SuggestAppend – In this mode, as user types the suggestion is appended in the TextBox and also it is displayed in the DropDown.
Example: As soon as letter M is typed, the item Mudassar Khan comes as a suggestion and also it is shown selected in the DropDown.
Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
4. None – This mode disables the AutoCompleteMode. In this mode, user cannot type in the ASP.Net AJAX ComboBox Extender control.
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
 
 

Binding ASP.Net AJAX ComboBox Extender control from database

Inside the Page Load event of the page, the ASP.Net AJAX ComboBox Extender control is populated with the records from the Customers Table.
The CustomerId and the Name column values are fetched from the database using SqlDataReader and are assigned to the DataTextField and DataValueField properties of the ASP.Net AJAX ComboBox Extender control.
DataTextField – The values of the Column set as DataTextField are visible to the user.
DataValueField – The values of the Column set as DataValueField are not visible to the user. Generally, ID or Primary Key columns are set as values in order to uniquely identify the ASP.Net AJAX ComboBox Extender Item.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name FROM Customers"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                cbCustomers.DataSource = cmd.ExecuteReader();
                cbCustomers.DataTextField = "Name";
                cbCustomers.DataValueField = "CustomerId";
                cbCustomers.DataBind();
                con.Close();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As SqlConnection = New SqlConnection(constr)
            Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId, Name FROM Customers")
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                con.Open()
                cbCustomers.DataSource = cmd.ExecuteReader()
                cbCustomers.DataTextField = "Name"
                cbCustomers.DataValueField = "CustomerId"
                cbCustomers.DataBind()
                con.Close()
            End Using
        End Using
    End If
End Sub
 
 

Fetching the Selected Text and Value of the ASP.Net AJAX ComboBox Extender control

Inside the Button Click event handler, the Text and Value of the Selected Item of the ASP.Net AJAX ComboBox Extender control are fetched and are displayed using JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
    string message = "Selected Text: " + cbCustomers.SelectedItem.Text;
    message += "\\nSelected Value: " + cbCustomers.SelectedItem.Value;
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
 
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
    Dim message As String = "Selected Text: " & cbCustomers.SelectedItem.Text
    message &= "\nSelected Value: " & cbCustomers.SelectedItem.Value
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
 
 

Screenshot

Ajax Control ToolKit ComboBox Extender Tutorial with example in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code