Duration: 19 minutes
Summary: In the previous few videos on ASP.NET Ajax we discussed the server version by talking about the Script Manager and Update Panel. Now we move to the client version of ASP.NET Ajax. The client side controls are called the Ajax Control Toolkit. This toolkit does not come installed with Visual Studio. It is on codeplex and updated with latest controls every few month. We will visit the web site and see 3 different ways of getting the toolkit (the download, the Package Manager Console, and the Extension Manager). In this video, we will install the package using the Console. Once it is installed in the site, we will go through an example that explains the usage of one of the controls (HTMLEditorExtender). In the upcoming videos, we will see how to add the controls to the toolbox and we will spend some time experimenting with the controls.
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, TextBox, HtmlEditorExtender, Register, TagPrefix, Namespace, Assembly.
Welcome back everybody. This is Ayad Boudiab. I'm a senior .NET application developer and we are continuing our discussion on ASP.NET Ajax. In the previous few videos, we discussed Ajax for ASP.NET on the server side. We will put the update panel. We work with the script manager and the timer and we saw how all these controls would work for us. But as we said, these are the controls on the server side. Obviously, there are some controls that you need to work with, very good controls, on the client side. This is the start of discussion for the client side version of ASP.NET Ajax.
Now, when I'm using those controls, they don't exist with Visual Studio. I have to install them myself. One thing though before I proceed, when we talk about Visual Studio remember that you can always download the Visual Web Developer 2010 Express which is very similar to Visual Studio. It provide you a lot of flexibility like Visual Studio and help you to build web applications and use the Ajax toolkit and everything like you're using Visual Studio. You can download this for free from the link that you see here. It's visualappdeveloperexpress.com and you can install it on any machine and use it pretty similarly like you're using Visual Studio.
There are a lot of things that I would discuss with you from Visual Studio. You can apply them here in Visual Web Developer 2010 Express. Now, having said that, I'm back in here in Visual Studio and I have the website open. OK? Now, one thing that I need to be clear about, is the fact if you look on the tools, you might see here Ajax Control Toolkit. Well, this is something that I added myself earlier. This does not come in Visual Studio. I can delete that tab and it's not there anymore. That's how you have the tabs in Visual Studio right now. There's no Ajax Control Toolkit.
Basically, how can I get to the toolkit, right? That's the first thing you need to be asking yourself is, where is it and how can I get it? The Ajax Control Toolkit is on the following link, ajaxcontroltoolkit.codeplex.com. You come over here and you can download the Ajax Control Toolkit. They tell you how you can use it with Visual Studio 2008 3.5 version of .NET and Visual Studio 2010. They show you some steps, but over here on the right- hand side, you see the download button. I download the toolkit and I have it on my machine. That's one way of working with the toolkit.
The second option would be if you have Visual Studio. By the way, I'll be back to this one in a second. I'll explain the download in a second, but let's say if you have Visual Studio. How can I get to the toolkit so I can have it in my browser? There are a couple of things that you can do. The first thing that you can do is first of all, under Tools, you will see the Extension Manager. For the Extension Manager, for the online gallery, you can search for the Ajax Control Toolkit and get it from here. That's NuGet, right? That's how we can use NuGet to basically look for all those controls and download Ajax control from here and I can have it in my browser. That's one way of doing so, OK?
The other option, now we are on the second one, we said we can use the download from here. We can use the Tools, Extension Manager, that's two, and then I can also use Tools, Library Package Manager, Packer Manager Console and you see the console down here. This is the Package Manager Console. On the console, you can type install package. Oops, a couple of I's there. Install package and you can just say Ajax Control Toolkit. Hit Enter. It will install that toolkit with your application and that's what I'm going to do here, in a second.
I'll leave this open for a while and then let me come back to the one I promised you about. Which is the first option of the download. Now, I already downloaded that on my machine. Save download and you save it on your machine. I saved it over here. I saved it on the Ajax Control Toolkit folder, here it is. I unzipped it. That's what I end up with, right? If I go to this folder, you see the toolkit for different languages, but what's important for me is that this is the toolkit ajaxcontroltoolkit.dll. That's the .dll that I'm interested in. That's the one that has everything that I need to work with.
By the way, they don't have toolkit available in Visual Studio because it's always updated in CodePlex and more controls are being added. Every few months, there's something new. So you need to go back to that CodePlex website and always get the latest of the toolkit so you can have the latest and the greatest that you can work with. This is the library that I'm interested in. This is the one that I can put in my bin folder, of the website that I'm working with. So I can have access to those toolkit controls that I'm interested in. I can copy this and drop it in my bin folder. This is the second thing that I can work with. We get the download. We get a couple of ways of getting to the Tools menu on Visual Studio and get it from there.
Over here, back in my Visual Studio project, I can install the package Ajax Control Toolkit and it will come over here in my project, and I can use it to create some controls for my website. Install package Ajax Control Toolkit. That's one thing that I can do. Let's see what would happen when we do that. Let's hit Enter and see what happens when we try to install the package Ajax Control Toolkit for my website, Ajax test. We need to give it a little bit of time and it says in here "downloading Ajax Control Toolkit 4.1.5" and you see the progress down here on the right-hand side at the bottom of how it's downloading the Ajax Control Toolkit. You'll see also some things that will happen to my project as this has been done. I don't want to stop the video. I want to show you as it progresses what happens to my project when I install the package Ajax Control Toolkit. We're almost there and you will see some changes in my project here and also I will have access to those controls so I can use them within my project.
By the way, you notice in here that you can type get-help nugget and see all the available commands on how we can install and uninstall packages, so that's interesting as well. It says "successfully installed Ajax Control Toolkit 4.1.5." This is available right now. I can use it within my project. It should automatically be added to my project and you notice in here something happening, right? Look at the right-hand side, something happening to my project, and you notice the folders being created. These are the ones that I showed you earlier over here, when we have different languages with Ajax Control Toolkit. You see in my bin folder, I have the Ajax Control Toolkit for all the different languages that it exists for. And then if I keep closing those, I end up with the one that I'm interested in, ajaxcontroltoolkit.dll. Well, this .dll right now is available in my bin folder for my website, so pretty much I'm set to go because that's what interests me is basically having this .dll in my bin folder, so I can use those controls on my page.
Let's go ahead and scroll up a bit in here, in the Ajax test, right click, Add a New Item, and then let's go over and add in here a web form and let's call this one Ajax Control Toolkit Test. Let's add that page. This page is empty right now. Let's do a few things. Well, up on the top in here, I have to register the Ajax Control Toolkit. Let's go ahead and do that. Let's use Register. I don't want Assembly. Register and then tagPrefix="ASP" and then namespace="AjaxControlToolkit" and then the last one is the assembly. In this case, I'll keep it. I removed it at first, but now I need it, Ajax Control Toolkit as well.
That's the register of the control that I need. Now I have like you do have with the other controls ASP as the prefix and then the actual control itself. I'm in here inside the div. Let's see what we can do to test those controls within the toolkit. In this case, I'm going to use the HtmlEditorExtender just to show you how this control can be displayed. I'm not going to go into the details of it, just show you that we can use some of the controls from the Ajax Control Toolkit that we just downloaded using the command prompt that you see down here. I was able to download this toolkit for my website. In the div, I'm going to start with ASP and then I'm going to add the ToolkitScriptManager. Asp:ToolkitScriptManager, I'm going to give him an ID and then we'll get ScriptManager and then runat="Server." That's the thing that I'd like to add for the page, so I have the Toolkit Manager that need to exist for my page.
The next thing is I'm going to drop a text box in here. Let me go back to my toolbox, look for a text box, and drop it here. The text box is, let's call it DXT Comments and of course runat="server." Let's give the text mode to be equal to multi-line and also let's give it some columns equal let's, say, 70 and let's give it some rows and let's make that equal to, say, 10. Now, I have the text box available on the page.
Now, these Ajax controls from the toolkit, how do they work? They extend existing functionality. I give it a text box and then the control would extend the text box and give it more functions. Let's say I'm working with, say, a button, then I will have the control extend a button and then give it some more functionality. So that's how they work. In this case, I will have the HTML Editor Extender extend upon the text box functionality. I have in here ASP and then HTML Editor Extender and then give it an ID and let's call it HTML Editor Extender 1 like normally they exist with an ASP.NET. I have HTML Editor Extender and then let's do a runat="Server." Well, didn't I just say earlier that they extend the existing functionality? In this case, I want to extend the functionality of a text box. How do I do that? I use the target control ID. The target control ID is the ID of the control that I am extending. In this case, what am I extending? The text box. What's the ID of it? DXT Comments. Take that, put it in the target control ID. That way, now I know that this actual control is extending the functionality of the text box.
Now that we are done adding the control, let's go ahead and preview that in the browser and see how it looks like. View in browse and I get an error message. It says that "the HTML Editor Extender does not have the public property." Well, I misspelled that [inaudible 00:16:12] ID. I believe I misspelled that. In here, it should be target control and I believe ID is capitalized. So target control ID. Make sure that you spell that correctly and then view that in browser. Here's the control which extends the functionality of a text box. Now, I can type things into the control and then highlight things, underline them, bold them, change the size, and then change the font. You can do a lot of these and then font color. You can choose a different color for the font and you can give it a back color. You can a lot of these. Of course, you need to highlight first to give it a back color.
You can extend a lot of these functionality using what's already available. That's why they call them extenders. They extend upon the existing functionality. They added some controls up on the text box to make it an HTML editor control like you see on the page. I need to discuss more and more of this functionality and see how they work. We can go over them one at a time and we can discuss them in the upcoming videos. Please stay tuned and we'll discuss all those shortly. Thank you very much for listening. I'm Ayad Boudiab, and you take care.