In this article I will explain with an example, how to use
AJAX Control Toolkit
AutoCompleteExtender without using
Web Services 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.
Using the ASP.Net AJAX Control Toolkit
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 following HTML Markup consists of:
ScriptManager – For enabling
AJAX.
TextBox – For displaying Contact Name.
AutoCompleteExtender – For enabling AutoComplete functionality in TextBox.
Properties:
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.
CompletionSetCount – Number of suggestions to be 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.
FirstRowSelected – Determines if the first option in the AutoComplete list will be selected by default.
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="SearchCustomers"
MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="false" CompletionSetCount="10"
TargetControlID="txtContactsSearch" FirstRowSelected="false">
</ajaxToolkit:AutoCompleteExtender>
Namespaces
You will need to import the following namespaces.
C#
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
WebMethod (PageMethod)
The following
WebMethod is used to populate the records from the
Customers Table of the
Northwind database.
This method accepts two parameters named as prefixText (string), i.e.entered text in the TextBox, 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 records are fetched based on the prefixText using ExecuteReader function.
Finally, the value of the
ContactName field is inserted into a generic List collection and then returned to the ASP.Net
AJAX AutoCompleteExtender Control.
C#
[WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
string query = "SELECT ContactName FROM Customers WHERE ContactName LIKE @SearchText + '%'";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@SearchText", prefixText);
List<string> customers = new List<string>();
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(sdr["ContactName"].ToString());
}
}
con.Close();
return customers;
}
}
}
VB.Net
<WebMethod>
Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)
Dim query As String = "SELECT ContactName FROM Customers WHERE ContactName LIKE @SearchText + '%'"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand(query, con)
cmd.Parameters.AddWithValue("@SearchText", prefixText)
Dim customers As List(Of String) = New List(Of String)()
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(sdr("ContactName").ToString())
End While
End Using
con.Close()
Return customers
End Using
End Using
End Function
Screenshot
Demo
Downloads