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 side. [Pause]
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 once.
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 controls.
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 working.
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 toolkit.
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 day.