This tutorial was created with and aimed toward users of Visual Studio.NET 2008. 2005 can be used, but Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this location, must be installed.
Also, if using 2005, some additional steps may be required that are not listed in this article.
Microsoft have a Control Toolkit that is not included with the .NET Framework, but can be downloaded from www.codeplex.com/AjaxControlToolkit. This Toolkit is constantly being updated and consists mainly of AJAX Extenders for existing ASP.NET Controls.
By now, you are bound to have seen Google's implementation of the AutoComplete AJAX control for commonly searched terms. The Google search box will now offer you commonly searched for phrases as you type! This means that the form will guess what you are typing, and provide matches for you to choose.
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
In this tutorial, you will learn how to implement something similar using the AutoComplete AJAX Control and a Web Method.
We will be using a SQL database to match the typed text against and retrieve matches to the user.
We start by creating the database. Open up a new C# web application project in Visual Studio, then right-click the App_Data folder in Solution Explorer and choose Add New Item.. SQL Server Database. We will create one table with two columns - id, name. We will create a database of names. For this example, it will not be a comprehensive list of names, but we will add some sample data once we have designed the table.
We set the id to data type int, and name to data type varchar(50). We also set the id column as Primary Key and Identity Specification, then save the table and close.
Next, right-click the project in Solution Explorer and choose Add ASP.NET Folder > App_Code. Then right-click the App_Code folder and Add New Item.. LINQ to SQL Classes. We will create a class to represent our database table so that we can use LINQ to retrieve records from our database as we type.
We should be presented with the Object Relation Designer. Here, we can goto Server Explorer and drag our table to the design view, then save. This will allow VS to create the class representation for us. We will then use LINQ to interact with this class and then save the changes back to the database.
Next, we will build our Web Method in the back-end of our ASPX page. Let's start by making sure we are referencing the LINQ namespace:
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
We can then create our Web Method like so:
[System.Web.Services.WebMethod]
public static string[] GetNames(string prefixText, int count)
{
NamesDataContext db = new NamesDataContext();
return db.tblNames.Where(n=> n.name.StartsWith(prefixText)).OrderBy(n => n.name).Select(n => n.name).Take(count).ToArray();
} |
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Here we are creating a Web Method within the page. We could create this as a Web Service, but for this example we are only using it on this page.
We first instantiate our LINQ to SQL Class we created earlier, then we use Lambda Expressions to select data from the database that match what the user is typing in. This method will be called from the AJAX AutoComplete Extender when the user types into the textbox. The AJAX Extender will maange the calling of the method, and also the retrieval of the string array.
We will also have a button that will move the chosen suggested text to a label:
protected void butName_Click(object sender, EventArgs e)
{
lblChosenName.Text = "You chose the name " + txtName.Text + ".";
} |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Our entire code-behind will look something like this:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string[] GetNames(string prefixText, int count)
{
NamesDataContext db = new NamesDataContext();
return db.tblNames.Where(n=> n.name.StartsWith(prefixText)).OrderBy(n => n.name).Select(n => n.name).Take(count).ToArray();
}
protected void butName_Click(object sender, EventArgs e)
{
lblChosenName.Text = "You chose the name " + txtName.Text + ".";
} |
Now we have built our Web Method, we will implement it into our ASPX page. We will first add the following ASP.NET Controls: a TextBox, Button and Label. Also make sure there is a ScriptManager, and an UpdatePanel if you want the form to make use of Asynchronus Postbacks.
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
Name:
<asp:TextBox ID="txtName" runat="server" />
<br />
<asp:Button ID="butName" runat="server" Text="Go" onclick="butName_Click" /><br />
<br />
<asp:Label ID="lblChosenName" runat="server" />
</ContentTemplate>
</asp:UpdatePanel> |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
Now if we go into Design view of our ASPX page, we can click on the SmartTag of the TextBox and choose Add Extender. This will only be available if we have the AJAX Toolkit installed.
Once you choose to Add Extender, you can choose the AutoComplete option. This will add a Custom Control to the page, named AutoCompleteExtender. We need to set the ServiceMethod attribute to the name of our Web Method, and also set the TargetControlID to that of the TextBox we will be using. Setting AutoComplete=Off on the textbox will turn off the built-in autocomplete in IE and FireFox.
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
Name:
<asp:TextBox ID="txtName" runat="server" AutoComplete="Off" />
<cc1:AutoCompleteExtender ID="txtName_AutoCompleteExtender" runat="server"
TargetControlID="txtName" MinimumPrefixLength="1" ServiceMethod="GetNames">
</cc1:AutoCompleteExtender>
<br />
<asp:Button ID="butName" runat="server" Text="Go" onclick="butName_Click" /><br />
<br />
<asp:Label ID="lblChosenName" runat="server" />
</ContentTemplate>
</asp:UpdatePanel> |
The AutoComplete Extender is also smart enough to provide caching - it will detect if the search term has been previously entered, and if so, it will not need to make another call to the database; it will retrieve results from cache.
