In this article I will explain a simple tutorial 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 is used since it 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 ComboBox Extender Control
1. Register the AJAX Control Toolkit Library after adding reference to your project.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
2. Drag an ASP.Net AJAX ScriptManager control on the page.
<asp:ScriptManager runat="server"></asp:ScriptManager>
 
3. Then you need to add the ASP.Net AJAX ComboBox Extender control on the page.
<ajaxToolkit:ComboBox ID="cbCustomers" runat="server" DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend">
</ajaxToolkit:ComboBox>
 
 
HTML Markup
The HTML Markup consists of an ASP.Net ScriptManager control, ASP.Net AJAX ComboBox Extender control and a Button.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ajaxToolkit:ComboBox ID="cbCustomers" runat="server" AutoCompleteMode="SuggestAppend">
    </ajaxToolkit:ComboBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
    </form>
</body>
</html>
 
 
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 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
 
 
Downloads