Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Use the ASP.NET AJAX AutoComplete Control

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[male narrator] In this video, I'll demonstrate the use of the AutoCompleteExtender Control that ships as part of the Microsoft AJAX Control Toolkit. The AutoCompleteExtender is a great way for you to provide real-time suggestions to your user as they type into a text box in your web form. So to get started, as usual, I'll fire up Visual Web Developer, create an AJAX-enabled website and go over into our Default.aspx page. Then the first thing we are going to do here is grab an TextBox Control, and just for easy viewing, I'll center justify my control, and here's the text box that's going to be the target of our AutoCompleteExtender. I'm going to go ahead and go down to the AJAX Control Toolkit tool tab in my Visual Studio Toolbox, grab an AutoCompleteExtender control and drop it onto my page. That message just tells me that there's already an instance of the AJAX Control Toolkit .dll in my Bin directory. So the next thing I need is, I need a service to call as user types in the text. So, we'll do that by creating a web service here in our project. So well say, "Add a New Item." We'll make this a Web Service. We'll say, "Place a code in a separate file," and instead of WebService, I'll call it "AutoComplete." Now for the sake of the demo, I'm just going to use a static method—and a couple things we need to do here. So, the first thing is in order for the web methods in this class to be accessible from Javascript code, we need to add the System.Web.Script.Services.ScriptService attribute, and this tells the runtime that we want the methods that are found in this class we are defining here to be collable via Javascript. So it tells the runtime that it needs to answer calls that end in /js by generating the Javascript collable proxy. Also because we're using a collection here, we need to import System.Collections.Generic. Okay. So, let's just go really quickly here. So, what I'm doing here is, basically I'm just taking—when this gets called, I'm taking the input, and I'm appending— so, I'm appending three randomly-generated characters. Now this is just for simplicity's sake. In your application there are lots of opportunities for how you can drive this data. So for example, you can use a SQL Expression with a like parameter to search various fields in your database. You could keep a cache of previously-entered data. Really the options are limitless. In our case, we're just going to sort of autogenerate. It really doesn't matter what the WebService does in terms of how you use the Control Extender. So, back on our page here, now we can go in, and we can start to configure our AutoCompleteExtender. The first thing we need to specify is the TargetControlID and in our case, the TargetControlID is the one text box that's on the page, so we'll just use that name. Now the next thing we need to do is, we need to specify what we're going to be calling by way of ScriptPath and ScriptMethod—I'm sorry, ServicePath and Method. But in order to do that, we need to add a ServiceReference so that the ScriptManager knows where to go and get the proxies to the Javascript collabable ServiceMethods that we're going to be calling. So, I'm going to create a Services collection, and inside the Services collection, I'm going to specify a ServiceReference, and I'm going to indicate that the path is going to be AutoComplete.asmx. Now we just have to specify the file name of the asmx file because this is a local WebService. So it's in our project. If it were in another project in our Solution or elsewhere on our WebServer, we'd need to specify a resolvable path. So, now that I've done that, I can specify the— Service and the method names. So our Service path— and our Service method is going to be the name of the method that we used here. So, GetCompletionList. Let's also— a couple of things we want to add. Let's see. MinimumPrefixLength and this is the number of characters that need to be typed before we start calling the ServiceMethod to make suggestions. The other thing that we want to tell it is CompletionSetCount, so how many suggestions do we want to be returned? We'll set that =12. and again there's a whole collection of Properties, so for example, let's see— We'll set EnableCaching=true so we can use caching to improve the performance a little bit if we want to. What have you— That should be enough to— for the purposes of the demo, so let's go ahead and fire it up. The ceiling of the text box will appear, and as I start to type into the text box, when I get to three characters, notice that the suggestions start to appear and we get 12 of them because that's what we specified. And that's it. It's that easy to use the AutoControlComplete Extender Control that ships as part of the AJAX Control Toolkit to add dynamic suggestions to your user input using text boxes and Microsoft AJAX and the AJAX Control Toolkit.

Video Details

Duration: 7 minutes and 7 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 7
Posted by: neudesicasp on Sep 4, 2013

The AutoComplete extender control from the ASP.NET AJAX Control Toolkit provides real-time suggestions to the user as he or she types in a text box on the Web page, where the list of suggestions is obtained by an asynchronous call to a Web service on the server.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.