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:] Get Started with the ASP.NET AJAX Control Toolkit?

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
Now that we have begun developing ASP.NET AJAX style applications by installing the ASP.NET extensions for AJAX and building our first sample application, let's add some resources to our toolbox by downloading and installing the AJAX Control Toolkit and seeing what sort of goodies are available in the toolkit for enhancing our AJAX style development process. So point your browsers at, click on the AJAX button, then on the Download button. Scroll down the page a little bit and find the entry for the ASP.NET AJAX Control Toolkit. If you click on that link, it will take you over to CodePlex, which is Microsoft's open source repository, and it will take you directly to the AJAX Control Toolkit page over there on CodePlex. The AJAX Control Toolkit lives here on CodePlex because even though the Toolkit was originally developed by some programmers at Microsoft, it is now in the community applications at CodePlex and is being extended and enhanced by developers both inside and outside Microsoft. And if you'll note here, there are two different versions that we can download. If we don't want to tinker with any of the source code, then we can just use the controls as is and by doing that, we can just download the no-source version, but we are going to want to play around with the source code at some point, so I am going to click on the full version, agree to the License Agreement, and then download the zip file. And note that this is just a zip file, so there is no actual MSI file, no installer to run like there was with the ASP.NET extensions for AJAX. But that's okay. So to get started, we'll unzip the zip file, and we need to choose a place to extract the files to. You can do this any place that you like, but it's my preference to put the Toolkit alongside the AJAX extensions since all of the applications that I develop using AJAX will also be using the AJAX Control Toolkit. So, I'm going to put it right along side the ASP.NET extensions for AJAX. So I'll place that directory into the extract to dialog, and then I'm just going to add a subdirectory, AJAXControlToolkit, and then go ahead and extract all of those files. So as soon as the extract finishes, we can go and have a look at what actually gets installed here. So notice here's the directory name that we specified, so the unzip utility created that directory for us. Here we can go and see what actually gets installed from that zip file. So the first thint is, the toolkit itself, and you can see here, these are all the controls that are included in the Tool kit, and we'll have a look at those in a sample application in a second, because this sample website includes a complete showcase that gives a sample of using each one of the controls that comes with the AJAX Control Toolkit, as well as a collection of walk-throughs that teach us how to do things like build our own custom control controller extender. There's a full collection of tests for the AJAX Control Toolkit. There's the AJAX Control Extender, which we can use to create our own extenders, as well as a TemplateVSI project that we can use to install project templates for creating custom controls as well as creating websites that by default use the AJAX Control Toolkit. So let's fire up this solutions since I have the full version of Visual Studio installed. And I want to do two things here. The first thing is, I want to build the VSI Template project so that we can install the project templates. Now if you don't have the full version of Visual Studio, it's not necessary. You can still include the .dlls in any project that you're building. This just provides us with a template that makes it a little bit quicker to get started. The next thing that I want to do, is I want to go up and find the sample website and save View in Browser. This will pop up a sample website, and you'll note here, that this is a really rich resource for seeing examples of how to use all of the control extenders. And if you've been following this technology for any amount of time, you'll recognize that the number of controls that have been included in the AJAX Control Toolkit has grown rapidly since the Community Technology Preview versions of the toolkit. So here's a whole collection, and if we want to take a look at how some of these work, let's look for example at the Collapsible Panel extender version. So it gives us an example along with some documentation about how this particular control is used. Here down a little farther down are the walk-throughs. So different "How Do I?" videos that we are doing will contain samples of using all of the controls in the AJAX Control Toolkit. I just wanted you to know that the sample website installs with the AJAX Control Toolkit, and it is a great resource for using all of the tools that come in the Toolkit. So let's go ahead and hop out of Visual Studio. A couple things that we want to do here. You'll note that there is just this BuildVSI .dll file in the AJAX Control Toolkit binaries directory. When you unzip the files, the actual AJAX Control Toolkit .dll will be in the Bin directory of the sample website, but because I installed all the source code, and I am probably going to want to play around and make different versions of the Toolkit. I am going to take copies of the original .dlls, and I am going to place them in the Binaries directory that installs in the root of the Ajax Control Toolkit unzip file. So this will give me the initial versions of the .dlls and just in the Binaries directory in the root where I installed the Ajax Control Toolkit is a good sensible place for those .dlls to live. You don't have to do this. It's just a convenience, and I like to keep things organized this way. The next thing I want to do is go into TemplateVSI project, and remember we built this when I was in Visual Studio. So just so that we can expedite the process of getting started with Ajax Control Toolkit projects, I am going to double-click on the VSI file. This is going to install all of the Toolkit Project templates, and it just tells me that one of those we have a preexisting one of the same name from using the Beta versions. I just said go ahead and overwrite those, and now we are ready to build our first AJAX style application using the AJAX Control Toolkit. So to do that, I'll hop into Individual Web Developer, say Create a New Website, and now I have this AJAX Control Toolkit Website Project template. Now remember, if you don't have the full version of Visual Studio so that you can build that .VSI file, you won't have this, but that's okay. If you don't have that, you can just include a reference to the .dll file that we moved into the Binaries directory of wherever you unzip your files to, and you'll be able to use all of the AJAX Contro lToolkit functionality yourself just by having the AJAX Control Toolkit Website template. It saves us that one extra step. So I'm going to go ahead and use that template, and now I can go to my Default.aspx page, and we can start using the controls that comes with the AJAX Control Toolkit. So let's scroll down and note that the MSI file--the installer for the AJAX extensions installed this Toolbox tab for us. But because the AJAX Control Toolkit is a zip file, it doesn't come with an MSI installer, there is no toolbox here with all of those controls. So let's go ahead and create one. I'm going to right-click on the Toolbox and say Add a Tab, and I'll name the tab AJAX Toolkit. Then inside the AJAX Toolkit tab that I just created, I'm going to say just Choose items. Then, I'm going to click Browse, and I'm going to go browse to the directory where I unzipped the AJAX Control Toolkit. So, that's by default, if you've been following along with me. That's in Program Files, Micrososoft ASP.NET 2.0 AJAX Extensions, and here is the directory name that we created AJAX Control Toolkit. And remember we moved those binaries into the Binaries directory. If you didn't move the AJAX Control Toolkit .dll along with me, then it's in the Bin directory of the Sample Website folder. But we moved it into--we created a copy in the Binaries directory, so, I'm going to select that one and choose Open. Now when I click on the OK button notice that the Toolbox tab that we just created is filled with all of these controls that I can use from the AJAX Control Toolkit. Now let's hop over to the page, and let's just do the simplest of Demos to show what the development model is for using these controls that we get with the AJAX Control Toolkit. Now really what a lot of these are is control extenders, and you'll notice that many of them are actually labeled with a suffix of extender. And what a control extender is, it is a control whose purpose is to control add behavior, usually client side behaviors, so AJAX style behaviors to the existing ASP.NET controls. So let's just do one really simple sample to get you started using the the AJAX Control Toolkit. Let's go up and grab and a standard ASP.NET control. I'll grab a button control, and let's add a text box for input and a label for output. Let's double-click on our button to create a click-event handler, and here we'll just say Label1.Text = whatever is in Textbox1. So all this is going to do is take whatever we typed into the text box and echo it back in the label. All right. So let's really quickly run that to prove that it works and then we'll ajaxify this application using one of the control extenders that comes with the AJAX Control Toolkit. So I have added some text to tell it Hello AJAX Developers, and when we click on the button, the text gets echoed back into the label as we would expect. So now let's ajaxify this little application. So let's go back into design mode here and scroll down to the AJAX Toolkit tab that we just created in our toolbox, and let's go down and grab this ConfirmButtonExtender control and drop an instance of it onto the page. And this is just telling me that the .dll already exists in the Bin directory. That's just because we created this project using the AJAX Control Toolkit Project template. So here's our control extender. Now what control extenders do, as I mentioned before, is to extend the functionality of existing ASP.NET controls. So let's first select the ConfirmButtonExtender, the control instance we placed on the page and look at it's properties. And notice that one of the properties is the TargetControlID. Now control extenders are specifically implemented to extend certain types of controls. So I can just drop down this drop-down list here and note that the ConfirmButtonExtender is specifically designed to extend button controls. So all of the button controls instances that exist on this page will appear here in this drop-down list. So we're going to select Button 1. That's the one that we want to extend. Now if I select the button that I specified as the target for our extender, and then go look at its properties, because I've associated this button with this button extender, the button extender inserts a collection of new properties into this particular instance of the button control. So we can add, in this case, just one parameter the Confirm Text for this extender. So we'll say, Are you SURE????? And that's it. We've wired up this extender to this button and added the properties that ConfirmButtonExtender injects into the properties collection for this button instance. Now we can run our application. And if we add that text back into the text box and click on the button, now note, now here's the Are you SURE????? confirm confirmation dialog that we entered by configuring the ConfirmButtonExtender. If I click cancel, nothing happens, so it's a real modal dialog. However, if we click on OK, then we get the post back, and the service site code executes, and that's it. That's all it takes to get started using the rich collection of controls that come with the AJAX Control Toolkit extender. As I mentioned, each of the "How Do I?" videos that we are going to do over the next couple of weeks will have samples of using the controls and the control extenders that are in the AJAX Control Toolkit But this gives you an idea of how to get started. Go ahead and start having fun with all those controls in the AJAX Control Toolkit.

Video Details

Duration: 13 minutes and 27 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Aug 30, 2013

Learn how to extend your ASP.NET AJAX applications using the ASP.NET AJAX Control Toolkit. This video starts with the very basics, including downloading and installing the toolkit, and adding a few of its controls to a simple ASP.NET AJAX-enabled web page.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.