ASP.NET 3.5: Enhanced 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

In my previous article (http://www.c-sharpcorner.com/UploadFile/1a88ad/2606/Default.aspx) I showed that we can obtain the Tabbed Pages effect just combining a MultiView control and 1 to n View controls: the MultiView control is the container of our content pages, the View controls are our content pages. After I had submitted my article, I realized that an improvement was possible. The issue is very simple: when a Tab is clicked, do you want to load the content of every Tab (even if n-1 contents are invisible) or do you want to load only the content of the selected Tab? If you desire a slow application , your right answer is the former one and you can use the Tabbed Pages I described in my previous article; but if you want your application to be efficient, then you need my Enhanced Tabbed 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 the 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 will be placed into the Literal controls between the <asp:View> and the </asp:View> tags (use PlaceHolder controls instead of Literal controls if you want your pages to contain other controls, such as Labels). Very important: you can give the LinkButton controls the IDs you want, but the View controls and the Literal controls must have their IDs following these simple rules:

• The View control IDs must be constituted of the ID of the related LinkButton followed by the "View" string (e.g.: if the LinkButton ID is "MyTab" the View ID must be "MyTabView").
   
• The Literal control IDs must be constituted of the ID of the related LinkButton followed by the "Literal" string (e.g.: if the LinkButton ID is "MyTab" the Literal ID must be "MyTabLiteral")

The Label named LogLabel will be our log and we'll use it to be sure that only the content of the visible page is loaded.

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. We have to add an EventHandler to every LinkButton control in our page (see rows 11-13-15 in figure 3): this allows us to populate the Literal control when a LinkButton is clicked. Rows 18-19 in figure 3 load the content of the first tab when the page is loaded for the first time.

When a LinkButton is clicked, the LinkButton_Click event is fired, and then the LoadInfo function is called; row 33 in figure 3 shows you how to get the Literal control linked with the clicked LinkButton. Now you are able to populate the content of your selected page just setting the Text property of this Literal control.

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

Every time you click on a Tab, it becomes highlighted and the LogLabel shows a text with the name of the Tab that has just been clicked. Note that the LogLabel has two rows: the first one is written when the page is loaded for the first time and the content of the first Tab has to be shown; the second row is written when the second Tab is clicked.
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.