ASP.NET 3.5 Tabbed pages


Tabbed pages are very useful to organize content pages. Many browsers and source editors (such as Eclipse or Microsoft Visual Web Developer) use them. They appear as shown in figure 1.

Figure1.gif
Figure 1

We can obtain the Tabbed Pages effect just combining a MultiView control and 1 to n View controls: the MultiView control will act as the container of our content pages, the View controls will be our content pages.

Let's start!!!

The first step is very simple, just put a MultiView control, n LinkButton controls, and n View controls in our page (n represents the number of tabbed pages we need) as shown in figure 2. Note that View controls must be within the MultiView control.

Figure2.gif
Figure 2

Let's rename the inner text of the LinkButton controls with the name of the tabbed pages. The content of every tabbed page has to be placed between the <asp:View> and the </asp:View> tags (delete the current text "Tab n - insert your content here")

The second step is very simple as well. Just declare a TabManager variable and add to it every LinkButton you added in the previous step in the same order than they appear within our page. Have a look at the figure 3.

Figure3.gif
Figure 3

Note that the constructor of the TabManager class needs three parameters: the MultiView we added in the first step, the colour of the selected tab, and the colour of the unselected tabs.

Now you can run your web page, it should appear as shown in figure 4. You can add a CssClass attribute to every LinkButton if you don't like their look.

Figure4.gif
Figure 4 - The second tab is currently selected

Very simple, right?

You can stop reading this document just now
if you are a simple user, but let's have a look at the TabManager class for most curious people (figure 5)

Figure5.gif
Figure5.1.gif
Figure 5

The comments within the code explain carefully how the TabManager class works.

Enjoy your tabbed pages.