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:] Use the ASP.NET AJAX Tabs Control?

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
In this video, I'll demonstrate the basics of the tab controls that ship as part of the Microsoft Ajax Control toolkit. To get started, as always, I'll fire up Visual Web Developer Express to say create new a website, choose the Ajax Control Toolkit enable website template, hop over into our default .aspx page here. Then inside our <div>, we're going to begin with a tab container. So the container is sort of the basic aggregate for all of the tab panels that will be used. So we're going to scroll down into our Ajax Control Toolkit tab in our Visual Studio Toolbox. Again, this is one you manually create since the toolkit doesn't come with an installer. Notice that there are 2 tab controls to be found here—tab container and tab panel. The container is the highest level, so we're going to include that. This just tells us that the Ajax Control Toolkit resources are already in the bin directory. Next, I'm going to grab a tab panel. Let's pop one of those into our web form here. And the first thing we're going to need is a content template. All right. So the template is the container for the content that will appear in each of those tabs. So let's just do a little formatting there. And we actually are going to implement 3 tabs inside our tab container, so let's do that. All right. So note we've just got 1, 2, and 3 to start with, and inside each of the content templates is any HTML template—any HTML content that we want. So in our case, I'm just going to put some text here. But remember, this is just a content template, so this can be any content that you want. It can include dynamic behaviors and DHTML, images, any HTML markup that you want. It's just web page content. All right. So just a little content here. Now let's cut and paste just to create some additional content in the other tab so we can see how this might look. And just so as we tab through them we can see the difference, let's add a few of these. Then again, remember, there's nothing special about this. It's just—it's just HTML content, and in our case we're not even really doing much in the way of markup— just using some text. But this can be any content that you want. So it can be static. It can be dynamically generated on the server, pulled out of a database. It can come from an XML file—whatever you like. The other thing is that because inside these tab panels you can use HTML artifacts, it means that you can actually populate the contents of the tabs based on Ajax style service method calls if you want to. So you can get really clever about how you integrate —sort of Ajax within Ajax relative to the use of these tabs. Let's run the application just as it stands right now. And notice we have tabs in place. They don't actually have header titles yet, so let's go ahead and add those. There are a couple ways that we can do that. Let's start by going into our tab panel definitions and saying HeaderText=, and we'll just add similar entries for each of the 3 tabs. All right. Let's go ahead and run that. So now we have our tab entries. Another thing to note here is that in addition to the content templates, we can add header templates. All right, so if we want to use something more than just plain text in the header, we can use any HTML content that we want. The other thing that this means is that it makes it very easy to dynamically change those based on the state of our application. In our case, we're just entering text which represents the HTML content that would go in that container. All right, and notice that's overridden. So I can apply style sheets. I can make them dynamic. I can basically do whatever I want. A couple of other things I'll show you. One of the things to note, of course, is that these are all CSS enabled, so you can basically set the visuals. There's also some events that are associated with the various tabs. So, for example, we might want to say OnClientClick, and add an OnClientClick event handler. So let's call this PanelClick. Then we could add some JavaScript function. So let's do that. And just add a quick little bit of JavaScript here. So we'll say script type= javascript, and then let's add a function to be an event handler for the PanelClick event that we just wired up to the second tab. So here I can do whatever JavaScript that I want, including making Ajax style callbacks to service methods on the server if I want to. In our case, I'm just going to pop up an alert to demonstrate that the PanelClick event gets called. So let's fire off the application now. Notice as click on the second tab, the PanelClick gets fired. Notice it doesn't happen in tabs 1 and 3, so we can wire up individual click event handlers for each of the tabs if we choose to. Again, we can get as—sort of—aesthetically fancy as we like by applying style sheets. That's it! That's the basics of how you get started using the tab control. I hope that you'll explore all of the—sort of—additional attributes and methods or events that are available in tab control. It's actually quite a rich set of functionality that's provided by the Ajax Control Toolkit. I also hope that you'll use the suggestion box on the learn portion of the ASP.NET site to let me know what sort of specif tab-based scenarios you might like me to demonstrate in futue How Do I videos.

Video Details

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

This video demonstrates the basics of the Tabs control from the ASP.NET AJAX Control Toolkit, with which you can create a set of tabs to organize content on a Web page. The selected tab is maintained across post backs, making the Tabs control ideal for form-based administration pages.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.