These days I had a situation where I needed to use a control which is a part of the AJAX Control Toolkit, concretely the AutoCompleteExtender control. I had a TextBox control in a web form where the user needed to add another user to a given list, but for easier typing and not having to remember the whole name and surname, I needed to provide some kind of suggestions from the list of the existing users in the database. So, I downloaded the AJAX Control Toolkit and used it to provide this kind of functionality. In this blog, I will provide an explanation of implementing this functionality and example source code of using this control.
First of all, you have to download the AJAX Control Toolkit from here.
Then, you need to include it in your project as a reference in your Microsoft Visual Studio project:
Find the folder where AjaxControlToolkit.dll is located, select it and click OK.
After you have added the AJAX Control Toolkit to your project, if you want to use it in your web form, you need to add this line of code in the beginning of your page:
<%@ Register TagPrefix="ajax" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
This means that I will be using AJAX controls on this page. If I want to access them, I will use the prefix ajax.
But, I also need to include the ToolkitScriptManager inside a <form> tag with property runat="server" as follows:
<form id="form1" runat="server">
<table style="width: 51%;">
<asp:Label ID="Label1" runat="server" Text="Type some text here:"></asp:Label>
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
In order to get the suggestions, I have to assign an AutoCompleteExtender with a TextBox, in order to get the suggestions while typing in the field. Then, we have the following code:
<asp:TextBox ID="TextBox1" runat="server" Width="224px"></asp:TextBox>
So, what do these lines mean? We see several properties here, but the most relevant for us are:
In the AutoCompleteService.asmx, which contains our function GetSuggestions to give us the resulting items, we need to remove the comment characters right above the definition of the web service, in order to use our web service for AJAX controls:
public class AutoCompleteService : System.Web.Services.WebService
Then, we have the web method GetSuggestions that retrives users from the database whose usernames start with whatever typed in the TextBox:
public string GetSuggestions(string prefixText, int count)
List<string> responses = new List<string>();
SqlConnection sql = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=" +
System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "DatabaseFolder") + @"\SQLDatabase.mdf;Integrated Security=True;User Instance=True");
SqlCommand command = new SqlCommand("SELECT * FROM Users ORDER BY username ASC", sql);
SqlDataReader reader = command.ExecuteReader();
string s = reader["username"].ToString();
catch (Exception exc)
The above code can be easily modified to your own needs. Hope that this blog post helps you in future. The example source code can be downloaded here.
My opinion - Ajax AutoCompleteExtender sucks :)
It is too slow...
I made my own simple Extender.... with jQuery, JSON and your favourite - Web Service :D
Useful content and awesome design you got here! I want to thank you for sharing your solutions and taking the time into the stuff you publish! Sublime work!
Nice example. However, if you ask me, AJAX Control Toolkit can be considered as already dead. ;)