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.
The part that I'm talking about is ASP.NET Ajax toolkit controls. We need
to use those controls so we can do our work on the client side, but one
thing that you need to be careful about, when we say we're using ASP.NET
Ajax control on the client side, it doesn't necessarily mean that all those
controls will make async calls back to the server. No. When we say Ajax
controls on the client side, many of those controls will simply benefit or
async calls to the server. OK? These are the controls that drop a lot of
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
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.