Duration: 17 minutes
Summary: In the previous video I showed you three different ways of having the Ajax Control Toolkit installed. In this video we need to add the controls to the toolbox. In Visual Studio 2010, we can right click on the toolbox on the left and add a new tab. Then we can click anywhere in that empty tab and add new items. To do so, we need to point to the AjaxControlToolkit.dll that we downloaded in the last video. By doing so, all the controls from that dll are added to the toolbox. Now any time we need a control we can simply drag it to the web page. Even the Register tag on the top of the page is already done for us. To continue on this discussion, we will add an accordion to the page. Every page needs a ToolkitScriptManager, so we add that first. Then, we drop an accordion on the page. The accordion contains a Panes collection. Every accordion pane within the panes contains a header and content. Finally we borrow some css from the Microsoft web site to make everything looks pretty.
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, Register, TagPrefix, Namespace, Assembly, Accordion, Panes, AccordionPane, Header, Content, CssClass, HeaderCssClass, HeaderSelectedCssClass, ContentCssClass.
Welcome back everyone. This is Ayad Boudiab. I'm a Senior .Net Application
Developer and we are continuing our discussion on ASP.net AJAX toolkit. As
we discussed in the previous video, I showed you three different ways of
installing the toolkit. The first one, basically, was to download it from
the website and to extract it. You have the DLL here. You can use the DLL
in any website you're interested in. Right? You can drop this in your bin
folder and you're ready to go from there.
The other option was to use the package manager console, which we got to
from the tools. Then we saw package manage console here. So in here, we
just do package install and then we specify for exact. I'm sorry, not
package install. Install package. Install dash package for the AJAX control
toolkit and we'll take it from there, right?
The third option was to go through tools and then do the extension manager.
These are the three different ways to do it.
Now in today's video, I need to show you how to add the toolkit here, on
the tool box and also how to work with an Accordion. The easiest step is to
first create a simple website. I have a brand new website called
ajaxtoolkittask. I don't have anything in here. All of this came already
with the template. Now, I just need to add that AJAX control toolkit over
here. In this case, I could right click and I can add a tab.
Let's add a tab and call it AJAX Control Toolkit. The tab is empty of
course. Now, I can right click within the tab and can choose items. I need
to choose the DLL that I just downloaded. I can add that and it will look
at the DLL, look at all the controls available within that DLL and add them
into this special tab that I just called AJAX Control Toolkit.
Right now, the tab is pretty much empty and I need to refer to this DLL
here, so I can basically add all those controls to my tab, so I can use
them within my project. This will come up eventually and we'll be able to
choose the DLL. Not framework component or com component or [WPF]. We're
interested in the net framework component. I'm going to browse to the
location where I have this file, so let me go ahead and do that on the
Here it is. That's the DLL that I'm interested in. I can say "Open" and it
will select for me all the controls that are part of that DLL. I just say
"OK" and it's going to read all those and add them to my AJAX Control Tool
kit. As you see here, now I have all the controls that they are part of
that toolkit that I can use within my project. By the way, I just do this
once. I don't need to add this in the tool box every time, because right
now, if I close Visual Studio and then open it again, this tool bar, this
tab within the tool box is still there. You don't have to do that more than
I deleted it in the previous video because I know I need to show you the
steps of basically adding it. Now that you have added it, it's there.
The other item that I'm interested in, is basically to see how I can work
with Accordion. Because as you notice in here, in the toolkit, I already
have something called Accordion and I have other stuff like AccordionPane.
We can work with Accordion and see how we can add it into our website.
Now one thing that I need to remind you, I'm not sure if you watched the
jQuery UI videos that we had earlier on Mr. Bool website, but in that video
we explained the use of the jQuery UI and part of that was the Accordion.
I can use Accordion from the jQuery UI or I can use Accordion from the
ASP.net control toolkit. Either way, it just depends on you and the
technology you're using and so on and so on.
In this case, I can use that Accordion within my website. Let's go ahead
and do that. Let's go over to the project side and try to add a new item.
Let's call this one AccordionTest. Click "add". Now, I have the empty page,
right? There's nothing inside it. Now, the one thing though that we need to
add, we need to drag that Accordion and drop it on the page. Let's go over
to the left-hand side where we have the controls. Remember, that we need a
toolkit Script Manager like we had with the server-side version of the
We just use a Script Manager, within update panel. In this case, I need
the toolkit Script Manager that I can use because otherwise, I will get an
error message if I don't use it. Here is the toolkit Script Manager. I want
to drag that and drop it in here on my page. This Script Manager needs to
exist there. After it, we'll add the Accordion and we'll add the other
parts of the Accordion. Now, when I drag that and I drop it on the page,
it's going to take a little bit because that's the first time I'm using the
toolkit after I added it to Visual Studio. I need to drop that here, and
here it is.
Let's make sure it's in the right place. Okay, that's inside the div and
notice on the right hand side here, that I end up with the same DLLs like
when we were working in the previous video. We get this DLL for all the
different languages that we have available, right? Eventually when I close
all these languages, you will notice that I have the main one that I'm
interested in. All of this within the bin folder, that way I should be able
to reference that and use it within my page.
Notice another thing, on the top in here, it has a register. When I drag
that and I dropped it on the page, it has register assembly AJAX Toolkit,
name space AJAX Toolkit, tag prefix ASP. Again if you watched the previous
video, you would have remembered that we did this part by ourselves. We
came in and we add the register with all the assembly name space. Now that
we added this toolbox and we dragged and dropped it, it added the register
by itself. I don't have to do that again. Now, I have a Script Manager and
my AJAX Control Toolkit has already been registered. Let's go ahead and
continue to see what else we need to do in order to get the Accordion
Now that I have the Script Manager, let's go down here and try to add the
Accordion. Here's an Accordion. We're going to drag it and drop it here on
the page and the Accordion has an ID, Accordion1. That's fine. Runat = server. There
are some things that I'd like to change with this Accordion, but I will do that shortly.
It has to do with the CSS because
the CSS for this Accordion right now is not pretty, so I just need to add
some CSS to it, but I'll do that momentarily.
For now, I just need to add the AccordionPanes that are part of the
Accordion. Because when we think about an Accordion, we think about
multiple panes that show and they have to show one at a time. When I click
on one it hides the other. So, only one pane is shown at a time.
Let's go ahead and drop the AccordionPane within the Accordion. Here's the
AccordionPane. But that AccordionPane has to exist within the panes, the
collection of panes. Notice in here, if I go within the Accordion, I'll
have the panes option. I have to select this. I have to select my panes and
then take this and put it underneath. This is a collection of those panes
that I need to add for my Accordion. I have Accordion Panes and then the
AccordionPane within it.
Now the AccordionPane has a header and a content. We need to add a header
here. You notice the header, right? Then, within, underneath the header,
there is the actual content. Here's the content. So now, I have the full
structure; Accordion, collection of panes. Here's the first pane, then,
AccordionPane [run at] server. Let's give him an ID and that would be ID
equals... Let's copy this so we have some space here and then let's give
this one AccordionPane1.
Now, I have the first pane. I can grab this, copy it and have a couple of
other panes underneath it. You notice automatically it changed the IDs to 2
and 3. So, I have AccordionPane1, AccordionPane2, AccordionPane3 and the
header. I'll just name them pane 1, this one, pane 2, and this one, pane 3.
Now I have the panes for my Accordion with the header and the content.
For the content, let's simply say, of course we can do a lot in here, but
let's say, here is the content for pane 1. Let's copy that. Copy. I'm
sorry, this is pane 2. We'll fix that shortly. That's pane 1. That's pane
2. And this is pane 3.
So, header pane 1 content; content for pane 1, header pane 2, again,
content for pane 2, header pane 3, content for pane 3. So, Pane, collection
of panes, three panes inside here and every pane has a header and content.
Let's go ahead and save that. Now, I have the Accordion with the header and
the contents. Let's go ahead and try to preview that and see what happens.
If I preview this item... of course, the first hit is going to take a
little while for the development server to load, but as you see, it says
"waiting for local host." When we try to display this Pane and we're
trying to see how it looks without doing any CSS. Pane 1, here's the
content. Notice when I click on pane 2, pane 1 is hidden. Now here's the
content for pane 2. Click on pane 3, again, pane 2 is hidden. Here's the
content for pane 3. Right? It's not very pretty, but you can mess with that
as long as you want. You see that one pane is shown at a time. Okay?
Now, if I scroll up in here, and I borrowed some CSS from the Microsoft
website so we don't have to go in and build all these CSS ourselves. I'm
going to drop a list of styles in here underneath the title. Here are the
styles. There is the Accordion with 400 pixels, then the Accordion header
with some borders and colors and fonts and so on. The Accordion header
selected, with all the fonts and background colors and so on and the
Accordion content again with some other properties. We already discussed
the CSS in previous videos. But at least for now, we know that you're
familiar with, or mostly familiar with what you see here.
You can also build your own using the Visual Studio. You can have a dialog
that loads up and build your own styles so you don't have to type them all
in one at a time. But the key is, here are the classes that I'm interested
in. I need to tie these somehow to the actual Accordion, because right now,
they are just defined here. There's nothing to tie them to the Accordion
that I'm interested in. Here's my Accordion and then right underneath here,
I'm going to add those classes. There must be some properties that tie
those classes over, and here it is.
Let's have those on separate lines so we can see them. The CSS Class is
called Accordion and here it is up here. See it? OK? Now, the other ones
are the header, Accordion Header. The selected, Accordion selected and the
content, Accordion content. All of these, one, two, three, four Classes are
declared up here and that's how we tie them to the Accordion, by specifying
those properties within the Accordion element. OK?
Let's go ahead and save and preview that in the browser. Now, we have a
prettier Accordion, right? Here's pane 1, here's the content. And you
notice when I select something, it changes the color and also only one of
the Accordions, pieces of the Accordion, one of the panes is shown at a
time, right? That's how we can work with an Accordion within the ASP.net
We'll discuss the other controls in the upcoming videos. I hope you're
familiar with the installations because we discussed three different ways
of doing so. From the upcoming videos, I'm going to just use the same tab
from here and drop those controls on the page as I go. If you have any
questions or any concerns on how we get the installation going, please
review this video or the previous video so you can be familiar with it.
Thank you very much for listening. I'm Ayad Boudiab and you have a good