Ajax Control Toolkit use instance (1) autocompleteextender

Introduction to Ajax Control Toolkit

Ajax Control Toolkit is a rich set of controls that you can use to create Web applications with Ajax features featuring high response and high interoperabilityProgram. The Ajax control toolkit contains more than 40 controls, includingAutoComplete,Collapsiblepanel,Colorpicker,Maskededit,Calendar,Accordion,HTML editor ExtenderAndWatermark.

 

Get Ajax Control Toolkit

You can obtain the information in the following ways:

1. for Visual Studio 2008 users, go to the Ajax Control Toolkit official website to download the Toolkit (. NET 3.5 or. NET 4.0 );

2. users using Visual Studio 2010 can obtain the installation package through nuget. If you have not used nuget, install one.

PS: The method for installing nuget is very simple. Click the nuget link in this article to go to the Visual Studio Gallery Extension library, download and install the nuget plug-in.

For more information about how to use nuget to obtain Ajax Control Toolkit, see:

Resources related to Ajax Control Toolkit

1. Ajax Control Toolkit official homepage: http://ajaxcontroltoolkit.codeplex.com/

2. control set usage example: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx

Use Ajax Control Toolkit to extend server controls

How to add an assembly to the toolbox is as follows:

The following describes how to use the toolkit to expand our server controls:

 

Add extended controls related to autocompleteextender

Autocompleteextender is an extension control that can be attached to any textbox. When you type a keyword in the textbox, an associated pop-up layer is displayed, the list of entries prefixed with the current keyword is displayed. You can select an entry from the list by using the direction key. Similar to the smart match in the baidu search box.

First, we drag a Textbox Control from the toolbox to the page, then we drag the toolkitscriptmanager and autocompleteextender controls from the Ajax Control Toolkit tool list, and finally we modify the attributes of autocompleteextender.Targetcontrolid associates it with the textbox you just dragged in.

Note that the placement of the three controls must follow the following order:

 < ASP: toolkitscriptmanager   ID  = "Toolkitscriptmanager1"   Runat  = "Server"  > 
 </  ASP: toolkitscriptmanager  > 
 <  ASP: textbox   ID  = "Textbox1"   Runat  = "Server"  > </ ASP: textbox  > 
 <  ASP: autocompleteextender   ID  = "Autocompleteextender1"   Runat  = "Server"   Targetcontrolid  = "Textbox1" 
 Minimumprefixlength  = "1"   Servicemethod  = "Getdatalist"   Servicepath = "Autocompleteservice. asmx" 
 Usecontextkey  = "True"   Completioninterval  = "500"  > 
 </  ASP: autocompleteextender  > 

Here are some important client properties, which are described as follows:

Attribute name	Description
Minimumprefixlength	The shortest front-end matching length. That is, if the keyword length you type is greater than or equal to this value, the front-end matching search is performed.
Servicemethod	Service Method Name: obtains the method for displaying data at the pop-up layer.
Servicepath	Service path
Completioninterval	The time interval for automatic match completion, in milliseconds. Generally, the time interval is no less than 500 milliseconds.

 

Create a web service that supports asynchronous calls

Create a new Web service named autocompleteservice. asmx and add a response method to it. The method named getdatalist is used here.

Note that the return value of the method must be a string array, and the parameter types in the method signature must be in the following order:

/// <Summary>
 

 
/// Summary of autocompleteservice
 

 
/// </Summary>
 

[WebService (namespace ="Http://tempuri.org /")]
 

 
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
 

 
[Scriptservice]
 

Public ClassAutocompleteservice: system. Web. Services. WebService
 

 
{
 

 
[Webmethod]
 

 
[Scriptmethod]
 

Public String[] Getdatalist (StringPrefixtext,IntCount,StringContextkey)
 

{
 

String[] Stringarr =New String[] {"Efficient e-person","Caizhi software","Doit. Im","Evernote","Dropbox","Browser"};
 

Return(From mInStringarrWhereM. startswith (prefixtext, stringcomparison. currentcultureignorecase) Select M). Take (count). toarray ();
 

}
 

 
}
 

Run the page you just created. The result is as follows:

Isn't it easy? Try this toolkit in the project.