AJAX Control Toolkit Tutorial AutoComplete Extender using ASP.NET C#



AJAX Control Toolkit Tutorial AutoComplete Extender using ASP.NET C#

 

Looking for an AutoComplete Tutorial using the AJAX Control Toolkit for ASP.NET?
Autocomplete, great concept used by thousands of websites and social networks. We take this AJAX control for granted, and you have used this AJAX control quite frequently actually… as a matter of fact it’s used by 500 million people daily and you used it to search for an image or a term on Google, just like you found this Tutorial. J
Let’s explain how the AJAX Control AutoComplete works,
1.       It attaches to a ASP.NET TextBox and
2.       It grabs its information from a database or a web service method
3.       You can set the prefixed minimum word count before it Autosuggest.
4.       The WebMethod takes PrefixText as an argument. It then sends a query to retrieve the related words that begin with the PrefixText value. After it finds the matching words, it returns the results as an array of strings.
5.       Caching is enabled, so what that means, if the same characters are entered several times, only 1 call is made to the Web Service.
6.       CSS Styling, The Control can be styles to match your current site and you can also style the results to have a Facebook style AutoComplete look.
AutoComplete extends any ASP.NET TextBox control. It correlates that control with a popup panel to display words that commence with the prefix that is entered into the text box. When the user has entered more characters than a specified minimum length, a popup displays words or phrases that start with that value. By default, the list of words is positioned at the bottom left side of the text box.
Before we start the tutorial we suggest

1.       Let’s start by adding a new WebForm to this project and name it AutoComplete.aspx
2.       Before you can even use the AJAX Control ToolKit, you must add a ToolScriptManager to the page. You can do this 2 ways, you can both Drag and Drop the ToolScriptManager or by typing the control in source mode. Below is the markup
3.       <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
4.       </asp:ToolkitScriptManager>  
5.       Now let’s add a TextBox to the page. You can Drag & Drop this or add via Source Code.
6.       Next is up is adding the AutoCompleteExtender, You can Drag & Drop this from the Toolbox. Or click on the Tab to the right on the ASP TextBox you just added.
7.       Now remember to set the Target Controls and name your TextBox to something you will remember.
8.       Now let’s add Webservice named AutoComplete.asmx
9.       You can rightclick on your solution explorer add new item then choose WebService
10.    You will want to use a SQL like parameter to create a service path. Also set the Service Method to the parametes of the TextBox.
11.    You can download the source file to see how we built the Web Service Method.
12.    You can now Add optional Styling to your AutoComplete TextBox.
 
 
The markup of the autocomplete.asmx will look like
using System;
using System.Collections.Generic;
using System.Web.Services;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : WebService
{
    public AutoComplete()
    {
    }
 
    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        if (count == 0)
        {
            count = 10;
        }
 
        if (prefixText.Equals("xyz"))
        {
            return new string[0];
        }
 
        Random random = new Random();
        List<string> items = new List<string>(count);
        for (int i = 0; i < count; i++)
        {
            char c1 = (char)random.Next(65, 90);
            char c2 = (char)random.Next(97, 122);
            char c3 = (char)random.Next(97, 122);
 
            items.Add(prefixText + c1 + c2 + c3);
        }
 
        return items.ToArray();
    }
}
 
 
The markup of the page will look like
  
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax Control Auto Complete</title>
    <style>
   
 
.autocomplete_completionListElement
                margin : 0px!important;
                background-color : inherit;
                color : windowtext;
                border : buttonshadow;
                border-width : 1px;
                border-style : solid;
                cursor : 'default';
                overflow : auto;
                height : 200px;
   
 
 
As you can see above, it’s a regular TextBox until you start typing in a word and it begins to find a matching statement or word.
Now this can be configured many different names, for example, If you only wanted the web service method to only search a database for first names and only return examples from a specific list of first names, or by matching zip codes or only last names. The possibilities are endless; you can even style your list to look like Facebook or a Google Style Autosuggest.
In the upcoming weeks we will be creating tutorials based on the AutoComplete Extender, which has proven to be a very powerful AJAX Control.
I strongly suggest you download the source file as this Extender is very powerful and can get a little confusing, and of course we don’t want you to be confused.
I also would like to tell you about Server Intellect
I just signed up at Server Intellect and couldn't be more pleased with my fully scalable & redundant cloud hosting! Check it out and see for yourself.
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
AJAXTutorials.com
 
 
 


Comments
ph metre said:

It is a nice article. This site has lots of advantage. I found many interesting things from this site. It helps me many away.

Posted Aug 7, 2013 2:21 PM
ph metre said:

It is a nice article. This site has lots of advantage. I found many interesting things from this site. It helps me many away.

Posted Aug 7, 2013 2:21 PM

Leave a Comment