This tutorial will show you how to use an AJAX Extender to provide suggestions as you type in a textbox, similar to the Google feature. C# version.
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!
Looking for more ASP.NET Database Tutorials? Click Here!
In this tutorial, we will be using Microsoft's AJAX Toolkit, which can be downloaded from www.codeplex.com/AjaxControlToolkit/. The toolkit features some AJAX Controls, most of which extend the current ASP.NET Controls.
We will be developing a web application that will provide suggestions to the text you type into a textbox, similar to the Google feature to suggest search terms. We will be using a SQL database to store names and then consult the database when a user types into the text box. If the text entered is a partial match for any database items, they will be displayed and the user can choose them.
The first thing we need to do is start a new C# Web Application Project in Visual Studio, then add a SQL Server Database by right-clicking the App_Data folder and choosing Add New Item.
We will be adding just one table for this example, with two columns - id and name. Once we have created the database, we will add some names so that we have a dataset to work with.
Once we have a good number of names in the database, we will then create a LINQ to SQL class to represent our database. Right-click your project and choose Add ASP.NET Folder > App_Code. Then right-click the App_Code folder and choose Add New Item.. LINQ to SQL Classes. Names it 'Names'.
We should now be provided with the Object Relation Designer. Here, we will goto Server Explorer on the left and drag our table onto the designer, then save. This will create a class representing our database that we can interact with, instead of interacting directly with our database. This means fewer database connections and increased performance. The AJAX control we will be using, the AutoComplete Extender, is smart enough to cache data too. This means that if the same text is entered twice, it will remember and pull the results from cache instead of making another connection to the database.
Once we have our DataContext set up and saved, we can begin on our ASPX page. Let's go ahead and add our controls to the page:
<form id="form1" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" AutoComplete="Off" /> <br /> <asp:Button ID="butName" runat="server" Text="Go" /><br /> <br /> <asp:Label ID="lblChosenName" runat="server" /> |
The textbox is the one we will use for data entry, that will also provide suggestions for text typed into it. We set the AutoComplete attribute to off to make sure that the IE and Firefox autocomplete features as disabled.
The button will be used to display the chosen name in the label control.
We can double-click on the button in design view to create an event handler for the click event. Also in design view, we can click the Smart Tag of the textbox and choose to Add Extender. This option is only available if you have installed the AJAX Toolkit from Microsoft, mentioned in the first paragraph of this article.
After choosing this option, click on the AutoComplete Extender. This will add two things to the ASPX page: the register assembly of the custom control at the top of the page, and then the AutoComplete control below the textbox:
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
..
<cc1:AutoCompleteExtender ID="txtName_AutoCompleteExtender" runat="server" TargetControlID="txtName" MinimumPrefixLength="1" ServiceMethod="GetNames">
</cc1:AutoCompleteExtender> |
We can AJAX-enable this web application using the ScriptManager and UpdatePanel. The ASPX page should now look like this:
<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> |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
You may also notice that the AjaxControlToolkit has also been added to the bin folder of the project. The TargetControlID attribute is set to the ID of the textbox that will be using the extender, the MinimumPrefixLength is the minimum number of characters typed into the textbox that the suggestions will occur. Finally, the ServiceMethod is the name of the method in the back-end that will return the suggestions.
Now we can turn our attentions to the code-behind, and will add logic to the button click event:
protected void butName_Click(object sender, EventArgs e)
{
lblChosenName.Text = "You chose the name " + txtName.Text + "."; } |
We create a Web Method for the AJAX Extender to use:
[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(); } |
The entire code-behind will look 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 + "."; } |
With the Web Method, we are making use of LINQ and Lambda Expressions to select partial matches from the database, using the LINQ to SQL class we created earlier.
Now if we run this web application, we will see that as we type in the text box, we are provided with partial matches from the database for the text we have already input.
Looking for more ASP.NET Database Tutorials? Click Here!
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.
|