How to create an Ajax TabControl for ASP.NET using Gaia
12. Jul 2007
One of the first people notice when they start using Gaia is that Gaia
doesn't contain any Ajax TabControl Controls. The reason is that you don't need any TabControl since it's so easy to create one yourself.
If you look at the above image you'll see however that it's definitely a TabControl lookalike, and that it behaves exactly like a TabControl can be verified at our
Ajax TabControl sample. Here I am going to explain how that Ajax TabControl was created.
The componentsIf you go to our
Ajax TabControl Sample and click the
"Show Code" button you'll see that the Ajax TabControl is in fact just a Gaia MultiView with three ASP.NET View Container Widgets inside of it and at the top three Gaia Buttons. Now the Gaia MultiView Control is a pretty useful Ajax Control. The reason is that it completely abstracts away everything needed to display different content in an "action series". In addition you have 100% WYSIWYG for all the different Views in Visual Studio which means you can drag and drop other controls onto any specific View from your Toolbox.
The internals of a Gaia MultiView is that it is a container widget which contains several "views". Now at any specific time
only one View can be visible at the time. This makes it the perfect wrapper control for both an Ajax TabControl and an Ajax Wizard control. Then from any Gaia Ajax Callback you can set it's
ActiveViewIndex and the former visible View will be IN-Visible and the new selected View will be visible. This is the simple fact which we are taking advantage of in our Ajax TabControl example. Now if you switch to see the CodeBehind of our "Tab x" Gaia Ajax buttons, you'll see that from those buttons we just change the ActiveViewIndex property and
voila; we have an Ajax TabControl! That's it! The rest is basically HTML formatting outside the scope of this article to make sure the styles/CSS renders the buttons and the MultiView in such a way that it looks like a TabControl.
Legal note: the meaning and content expressed on these blogs don't necassary correspond with the meaning of the legal company Gaiaware AS, but are considered to be personal opinions and expressions.