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.