Duration: 23 minutes
Summary: As part of our discussion of Ajax Control Toolkit, today we will talk about the AutoCompleteExtender. This extender extends a text box and gives us the ability to have a drop down of matching options. So we type some text into the text box and there is a method that is called to search for options that match the text we typed and give us the matching list. Then we can choose from the list the item we want. In our case we are using first a web method that takes the text the user typed and the count of matches to return as parameters and returns a string array with the matching options. Then we add a web service (asmx service) to the web site. The service will contain a method with the same signature as the previous method (notice that you can change the name to anything you want, but the signature needs to match. I mean by signature the parameters and return type). We add some attributes to the service and the method to make them callable from script using ASP.NET Ajax. Once we do that, we add the service path to the extender and we are ready to go.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, ToolkitScriptManager, TargetControlId, TextBox, AutoCompleteExtender, ServiceMethod, ServicePath, MinimumPrefixLength, WebMethod, ScriptMethod, ScriptService, StartsWith.
Welcome back everyone. This is Ayad Boudiab. I'm a Senior .NET Application Developer. As you'll notice, in this series, we've been discussing the Ajax Control Toolkit. As you've seen in the previous videos, we discussed the Ajax controls on the server side, and now we've been discussing some of the controls on the client side.
Of course, I'm not going to be discussing all the controls on the client side. I'm just showing you a few examples on how we can use them, and they're all very similar in terms of extenders and so on. We need to discuss a few of them, see how we can work with them. Of course I'm going to point you, as I promised in the previous video, I'm going to point you to the animation page so you can learn more about animation and try to apply it with your controls.
The two main things that I'd like to talk about today, it's basically one thing, but it's just two parts of it, is the AutoComplete. As we all know, the AutoComplete basically is a textbox. When I start typing, it starts giving me some suggestions. All right? Instead of having a drop-down where the user can select from, I start typing in my textbox.
Then something is going to talk to the server, get some matches to what I just typed, and then give me some suggestions. So, I can select one of the options that I get back. Right? That's the main thing. Then, I have a textbox, and I want to extend this textbox somehow. OK? Let's go ahead and create a page and then we'll take it from there.
The first part is basically using a web method to retrieve the data. The second one is creating a WebService that also provides us the data. If I go over to the right-hand side here where my website is and try to add a new item. Let's call this one "AutoCompleteTest". Here's the page to select a web form, and that's again, let's call it "AutoCompleteTest".
Click 'Add'. Now I have my page. All right? My page is empty, and this is "AutoCompleteToolkitTest", I want the "AutoCompleteTest". That's the page. It's empty. It says, "AutoCompleteTest.ASPX". Right? I have nothing on the page. As I mentioned earlier, I need first a textbox, but again, when we work with the Ajax toolkit, we know that the first thing we need to drop on our page is a TookitSriptManager.
All right? That's the first part of completing our project is looking for the TookitSriptManager. Here's the TookitSriptManager, I'm going to drop that in my page. Once I use the TookitSriptManager, then I'm going to use a textbox. Once I'm done with that, I'm going to add the AutoCompleteExtender.
By the way, I'm not sure why this error is showing up. I don't want to replace the current one. I already have the DLL, and that's part of the bin folder. As you'll notice in here, at the bottom, I have the AjaxControlToolkit DLL. OK? Let's go back to our subject in here and we have the Script Manager on the page.
Underneath the Script Manager, I'm going to drop a textbox, and then extend the textbox. Here's the textbox, drop it on the page, and just leave everything as the default. Or, you know what? Let's go ahead and change the ID. Let's call this one "txtNames", because I'm looking for names as part of my options. Save that.
The other thing we could do is basically scroll down here for the AjaxControltoolkit tab. Look for the AutoCompleteExtender. All right? Now the thing is, and as I've mentioned to you before, these are not always in alphabetical order. I need to look for the AutoCompleteExtender so I can drop it on the page.
Here's the AutoCompleteExtender. I can take this one and drop it here. OK? That's one thing I can do, but let me just take you to one step in here, and let's look at the design tab. You notice in here, the design tab? If you go to the design tab, you notice you have the textbox and the Script Manager. Nothing new here. I can click on the textbox. I should be able to get an option that allows me to extend the actual textbox.
For some reason, it's not showing up. It should. I should get some type of a button in here that allows me to extend the textbox. Anyway, let's go back to the source and see how we can proceed. That's weird. It should have shown up, in terms of allowing me to change the design in here and extend the textbox.
At any rate, let me go back to my original code and let's see if we can drop the AutoCompleteExtender on the page. AutoCompleteExtender, drop it here. By the way, the normal process of doing so when I'm in design tab, I can click on the textbox and I can select from the options in here to actually extend the textbox. Then I can select, it gives me a list of extenders and one of those could be the AutoCompleteExtender. I can select that and take it from there.
It's a faster process of doing that, but it's just the same thing in here as dropping the AutoCompleteExtender on the page. Let's go ahead and proceed. We have the AutoCompleteExtender. It has an ID. The thing is, how we can tie it to the textbox. As we've done before, we need to make sure that we select our TargetControlID.
That's how we work with these toolkit control, is basically selecting the target control, which is in this case "txtNames". That's the one that we chose here. I have tied them together, and it's both of them Runat="server", so nothing new there. The other thing that I'd like to choose is basically when the user starts typing something on the page. When do you want the actual method to start retrieving the data that you need?
Sometimes you might want the user to type two letters before something happens. Sometimes you might need the user to type three letters. In our case, we need to make sure that as soon as the user types one letter, I need to go back and retrieve the matching options. Right? To do this, I use the MinimumPrefixLength to make it equal to 1.
MinimalPrefixLength is just the property that I'd like to set, so when only one letter is typed I go back and retrieve all the data that is matching my option. OK? Let's go ahead and save that and see how we can add the actual method that ties us to be able to retrieve the data that matches our option. We have the AutoCompleteExtender, and we have the textbox.
Now, I need to add the method. In here, what I need to do is basically go to my properties within the actual control and start adding in the methods. The easier way again, is basically to go to my design tab. As I mentioned to you before, that's where I can select the extenders and the method that I'm interested in. Now, it's showing up.
When I hover over the textbox, here are my options. When I click on them, it says "Add Extender". Well, I already have one but let me show you what I get when I click on it. You see all the extenders? These are the ones that you can add as extenders to the textbox. It understands what type of extenders match which control.
Because I selected a textbox, it allows me by giving me these options which I can select to basically make them as extenders to the actual textbox. Well, I already have one right now, so I don't want to select one. What's important to me is, how can I tie this to a method? One of the options that I have here is 'Add AutoComplete Page Method'. Let's click on this and let's see what it gives us.
It took me back to the code, but before I go to the code, let me show you something here. If I go to the source, you notice that it gives me already the service method as one of the options. That service method is named 'GetCompletionList'. It means, go get me the list of options that matches what the user has typed, and give those as options to me.
Well, this method is already implemented in the code behind. Here's the code behind. It says I have a method. It's a WebMethod with the following attributes, and the signature by the way is important. It needs to return a string array. It needs to be a static method, and it needs to take the prefix text, which is what the user just typed, typed one letter, so that will be coming in as one parameter to match this prefix.
Then that's the count, that's the number of matches you want to have. For example, you can set that count to be 10 so it will return for you 10 matches of what you already have. OK? That's one of the options we can work with. Then, the ContextKey, I'm not using the ContextKey in this case.
If I go back to the actual design, and here's the toolkit extender and then here's the textbox. Let me see if I go over to the properties in here for one second, I want to try something. If you go to the properties and you select the textbox itself, you notice that a new property is showing up in here. That's the AutoCompleteExtender1. Well, this is the AutoCompleteExtender right here.
It is matching the AutoCompleteExtender1 that I just got. It added a list of properties for this textbox that matches this AutoCompleteExtender. Here are the properties, right? The animation, the behavior, the client. It looks like it's giving me a lot of options in here that I can work with.
Now, what things can I change as far as this AutoCompleteExtender is concerned? I can, for example, of course it's enabled but I can set the CompletionSetCount for this extender. The CompletionSetCount is being set to 10, which is good. So, I am going to return 10 of those items when the user has typed. I'm going to return 10 matches.
I don't want to have this one to be a huge number, and that could bog the server. I just need to have 10 matches back and the user can select from them. The MinimalPrefixLengths, that's the one that I set and that value is 1. These are two important points that I'd like to keep. The CompletionSetCount returned for me 10 of those, and the MinimalPrefixLength is 1. Let's go ahead and save that.
Now I need to go on and implement my method. Here's the method in here, and I don't want to return an empty string array. I'm going to return a list of names. Right? I could retrieve this list of names from the database by calling some, for example, store procedure or using ado.net to retrieve some names, but for our case, let's create an array of names. All right?
These are the array of names that could be some of my options. Now, let's go ahead and write a link query that basically tells us to return for us the matches that we're interested in. We need to return something. As I mentioned to you, we need to have a string array. OK? Let's do this.
First of all, I need to have something from the list of names, something matching the prefix that the user has typed. I want to return that many of those, in our case 10, but at least in this case, that many of those. In here it says, "Return". I'm going to say, (from n in names where n.StartsWith(PrifixText,StringComparison.CurrentCultureIgnoreCase), if the name starts with the prefix. I'm going to return this, but I need to make sure that my string comparison is ignoring case. OK?
I don't if he types upper case "S" or lower case "s", it's still matching. I'm going to go with StringComparison.CurrentCultureIgnoreCase and the options, in this case, is CurrentCultureIgnoreCase. That's the match that I'm interested in for this StringComparison. OK? Let me go to the next line so you can see what we're typing.
So far we have a StringComparisonIgnoreCase, and I'm going to select that 'n'. For everyone of those 'n' that matches my options, I'm going to select that 'n' from the list of names where the name starts with that prefix, I'm going to select that 'n'. Then, I'm going to take that many, 10 of those matches, that's all that I need. Before I'm returning, remember I'm returning a string array so I have to turn my results back into an array. So, I say .ToArray().
That way, I get my matches back and then those are returned to what the user has typed. Let's go ahead and look at the page. Right-click on it, view it in the browser. It loads the development server, and it should give me some of the matches that I'm interested in. Then I should be able to type some letters and get some matches.
It should work very well in Google Chrome, but if it didn't match I'm going to load IE and try to type that in IE and see if that makes any difference. But it should work very well in Google Chrome. Let's go ahead and try that and see what it gives us. So, we have a WebMethod having a link call to retrieve all the matches from the names array that we have.
Whenever we type something, we get the matches, return that back to the user. The user will be able to select from those options as one of the matching text. Here it is. I get the textbox. I need to type something in here. Let's for example type "J". It gave me James, John, and Jeff. They all match my selections. Let's go ahead and type "A". It returns for me only Ayad, because that's the only match with an "A".
Let's type for example "L", and that gives me Lisa and Lola because these are the type matching my selection. OK? That's how we can work with the AutoComplete TextBox because it's an extension of the actual textbox. It's retrieving the data using a WebMethod.
Now that we've done this using the WebMethod, let's see how we can do the same thing but using webService in this case. Let me expand in here the actual website, and add a new item. Now the new item that I need to add is an ASMX WebService. OK? Let's scroll down and select the WebService. Let's call this WebService, for example, "Employee" or for example "Employee".
Yeah. 'EmployeeWebService', that's just like the list of names, but they are employees. So, 'EmployeeWebService', and when I click add it should create this ASMX service in here with the code that I'm interested in. You notice in here that we have an example. For example, the WebMethod, HelloWorld, but I'm not interested in the WebMethod, I'm interested in the GetCompletionList method like the one that we just created earlier.
Let me go ahead and copy the method that I have, instead of you seeing me just typing the whole thing. Here's the WebMethod that I need to add. It's a method, also GetCompletionList. It takes a string PrefixText, that's what the user typed, so I can get a match on those. I'm going to get that many 'count' and the ContextKey. The same signature as the method you've seen earlier.
This method, I have a string of names. In this case, I manipulate them a little bit to prove to you that it's coming from the WebService, not from the other method. I just added some X's in here instead of the actual names. Then, I said from end in names, where end that starts with that prefix. Give me that many count, and turn that into an array because I'm returning a string array. OK?
Since it's a WebMethod, I need to tag that with System.Web.Services.WebMethod, and also with System.Web.Script.Services.ScriptMethod. These two attributes need to exist in there in order for this method to work.
The other thing that's also important, and sometimes it could drive you crazy when you try it the first time is notice the comment line in here. It says, "To allow this WebService to be called from script using ASP.NET Ajax, uncomment the following line." You need to make sure that that attribute exists not only on the method, but I need one for the actual service itself.
I'm going to uncomment this line and now it's System.Web.Script.Services.ScriptService. This is ScriptService up here, and this is a ScriptMethod in there. It's a WebMethod, it's a ScriptMethod, and don't forget the ScriptService tagged to the actual service on the top.
Now I have a WebService that basically I should be able to call that service and be able to retrieve the actual names from using that WebService. Now I have the service and I have the GetCompletionList method. The name of the WebService is called EmployeeWebService. Now, if I go back to the ASPX page, I have in here that the method name is GetCompletionList, but I don't have that tied to a WebService yet. OK?
I need to add one more attribute in this case, and that attribute is called the 'ServicePath'. It means what service you're trying to use as a WebService. The ServicePath equals the ASMX service that I just created. Not only the method itself, but also the EmployeeWebService, in this case, which is the ServicePath.
I have the ServicePath. I have the ServiceMethod. I should be able to call that WebService to be able to give me all of my matches. Let's go ahead and right-click in here, and view that in the browser. It should load faster this time considering we've loaded that page before. You should be able to type something in there to see if we can get our matches and provide that to the user.
Now in here, I have typed, let's say, "J". You notice here it said James, JX, JXX, right? These are coming from the WebService, not from the other method that we were using. "L", you notice that I have "LXX" and "Lola". To prove to you, here's my WebService, and you notice that I have those "X"'s in the names. I have James, I have "LXXX," I have "JX", I have also JXX in here. OK? So, this is the WebService returning those calls.
Again, I could have used ADO.NET or procedure call, that's a SQL server for example, to call the store procedure. This store procedure will return for me the data, put them in a string array and return that to the user. OK? This is how we work with an AutoCompleteExtender that extends the textbox. This is very powerful, because I can use a WebMethod to retrieve my data, I can use a WebService to retrieve my data that I can provide to the user.
I hope this video has been helpful to you. Please let us know at Mr. Bool website if you have any questions.
Thank you very much for listening. I'm Ayad Boudiab and you take care.