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 VS.NET 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.
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
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 VB.NET 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 Shared Function GetNames(ByVal prefixText As String, ByVal count As Integer) As String()
Dim db As New NamesDataContext()
Return db.tblNames.Where(Function(n) n.name.StartsWith(prefixText)).OrderBy(Function(n) n.name).Select(Function(n) n.name).Take(count).ToArray()
End Function |
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
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 Sub butName_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butName.Click
lblChosenName.Text = "You chose the name " & txtName.Text & "."
End Sub |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Our entire code-behind will look something like this:
Imports System.Linq
Partial Class _Default
Inherits System.Web.UI.Page
<System.Web.Services.WebMethod()> _
Public Shared Function GetNames(ByVal prefixText As String, ByVal count As Integer) As String()
Dim db As New NamesDataContext()
Return db.tblNames.Where(Function(n) n.name.StartsWith(prefixText)).OrderBy(Function(n) n.name).Select(Function(n) n.name).Take(count).ToArray()
End Function
Protected Sub butName_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butName.Click
lblChosenName.Text = "You chose the name " & txtName.Text & "."
End Sub |
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> |
Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
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.
To download this project, enter your email address and a link will be emailed to you.
