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.

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.


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.

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.


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)



Figure 5

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

Enjoy your tabbed pages.