Click here to Skip to main content
11,496,146 members (697 online)
Click here to Skip to main content

A Simple ASP.NET Tab Control Using the MultiView control

, 22 Feb 2006 979K 26.5K 188
A simple tab control using the ASP.NET MultiView and Menu controls.
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.

Introduction

Recently, I had been writing a small web scrapping application using ASP.NET 2.0. During which time I was trying to investigate some of the new controls available in ASP.NET 2.0. One of the 2.0 controls that I found particularly interesting was the MultiView control. The new MultiView control works in tandem with an embedded View control. Each View control acts as a content container, and behaves very much like a Panel or Canvas area. At run time, the MultiView control manages the View controls to ensure only one View is visible at a time. We can use the ActiveViewIndex property of the MultiView control to specify which View should be visible at any particular time. Sounds kind of like the Tab control right? What I wanted to do was implement a quick tab control without having to purchase a commercial component. Disclaimer, the commercial components are much more robust and probably worth the case but if you don't have the cash or don't need the "cadillac" then the following code provides a very simple solution.

About the control

When I approached writing my simple tab control, I had this article in the back of my mind, CSS and Round Corners: Build Accessible Menu Tabs: a nice article on how to make a tab control using CSS tricks and images.

What I wanted to do was combine the ideas in this CSS article with the ASP.NET Menu and MultiView controls to create a relatively nice looking tab control. This is what I came up with:

First, I dropped a Menu control onto my page. The Menu control was going to render my "tabs" and also be the controller of the MultiView control. I set the menu to be orientated horizontally. Likewise, I gave each MenuItem an ImageURL that pointed to my tab image. Note, you will have to implement your own tab image as you see fit. Below is my Menu control specification:

<asp:Menu
        ID="Menu1"
        Width="168px"
        runat="server"
        Orientation="Horizontal"
        StaticEnableDefaultPopOutImage="False"
        OnMenuItemClick="Menu1_MenuItemClick">
    <Items>
        <asp:MenuItem ImageUrl="~/selectedtab.GIF" 
                      Text=" " Value="0"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="1"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/unselectedtab.GIF" 
                      Text=" " Value="2"></asp:MenuItem>
    </Items>
</asp:Menu>

Next, I put my MultiView control onto my page. Note, each View control contains a table with a <td> tag that will hold all the contents for the active tab. Think of the <td> element as your placeholder for the tab contents. I put this <td> element in a CSS class called "TabArea". This class puts a border around the contents. Refer to the stylesheet in the sample download.

<asp:MultiView 
    ID="MultiView1"
    runat="server"
    ActiveViewIndex="0"  >
   <asp:View ID="Tab1" runat="server"  >
        <table width="600" height="400" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
     </asp:View>
    <asp:View ID="Tab2" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
    <asp:View ID="Tab3" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                  TAB VIEW 3
                  INSERT YOUR CONENT IN HERE
                  CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>
</asp:MultiView>

Last, I wired the MenuItemClick event of the Menu control to the method below:

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _
          ByVal e As MenuEventArgs) Handles Menu1.MenuItemClick
    MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
    Dim i As Integer
    'Make the selected menu item reflect the correct imageurl
    For i = 0 To Menu1.Items.Count - 1
        If i = e.Item.Value Then
            Menu1.Items(i).ImageUrl = "selectedtab.gif"
        Else
            Menu1.Items(i).ImageUrl = "unselectedtab.gif"
        End If
    Next
End Sub

In this event, you can see that I set the pertinent view to be visible based upon which tab (really a MenuItem) was clicked. Likewise, I set the correct ImageUrl for the selected MenuItem. This is basically swapping in and out images for the tabs. This should be the image of what you want a selected tab to look like. In my example, I have two images, a selected tab and an unselected tab. This is what my example looks when "tab 2" is selected:

This control basically rides on some basic CSS styling and the ASP.NET Menu and MultiView controls. Pretty simple, right?

Hope you can find some use for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Brian Rush

United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 Pin
Bala Ballzz17-Jul-14 20:28
memberBala Ballzz17-Jul-14 20:28 
QuestionNo Text? Pin
panania12-Nov-13 9:28
memberpanania12-Nov-13 9:28 
GeneralMy vote of 3 Pin
Kanzz_25413-Jun-13 0:48
memberKanzz_25413-Jun-13 0:48 
QuestionMouseover Tabs Menu Pin
MS Babu10-May-13 21:16
memberMS Babu10-May-13 21:16 
QuestionMy vote of 4 Pin
Alireza_136215-Mar-13 0:05
memberAlireza_136215-Mar-13 0:05 
QuestionDoesn't work with Chrome Pin
GamleKoder6-Aug-12 10:02
memberGamleKoder6-Aug-12 10:02 
AnswerRe: Doesn't work with Chrome Pin
robindegen16-Aug-12 4:00
memberrobindegen16-Aug-12 4:00 
QuestionC#.net code Pin
jaipal090811-Jun-12 4:17
memberjaipal090811-Jun-12 4:17 
AnswerRe: C#.net code Pin
GamleKoder6-Aug-12 9:50
memberGamleKoder6-Aug-12 9:50 
QuestionTabs are not switching!! No event on clicking Menu Items!!Please help...Urgent!! Pin
Chinthu Krishnan20-Mar-12 11:05
memberChinthu Krishnan20-Mar-12 11:05 
QuestionThanks Pin
Arsemaz112-Jan-12 0:20
memberArsemaz112-Jan-12 0:20 
GeneralMy vote of 1 Pin
naresh@hits27-Sep-11 22:05
membernaresh@hits27-Sep-11 22:05 
QuestionChanging to Other Views is Not Working Pin
RichardM320-Jul-11 12:11
memberRichardM320-Jul-11 12:11 
Generalmy menu items are not showing in horizontal Pin
reddygmail15-Jun-11 0:42
memberreddygmail15-Jun-11 0:42 
GeneralRe: my menu items are not showing in horizontal Pin
Member 25095830-Jun-11 12:41
memberMember 25095830-Jun-11 12:41 
GeneralMy vote of 4 Pin
c.net.sam30-May-11 0:44
memberc.net.sam30-May-11 0:44 
GeneralNice One! Pin
feeza01257-Apr-11 22:00
memberfeeza01257-Apr-11 22:00 
GeneralMy vote of 5 Pin
SamuelZhang883-Mar-11 19:44
memberSamuelZhang883-Mar-11 19:44 
GeneralObsolete but good- use Ajax now Pin
Frank Jammes6-Dec-10 2:40
memberFrank Jammes6-Dec-10 2:40 
GeneralMy vote of 5 Pin
shekhar bhosle18-Aug-10 1:35
membershekhar bhosle18-Aug-10 1:35 
GeneralSign up form just as biultin createuser wizard Pin
vicky martyn15-Aug-10 4:57
membervicky martyn15-Aug-10 4:57 
GeneralThank you!!!! Pin
ssneed25-May-10 20:35
memberssneed25-May-10 20:35 
GeneralThank You Pin
scorpiobra4-Nov-09 14:46
memberscorpiobra4-Nov-09 14:46 
GeneralGood control with simple programming Pin
vineetas328-Aug-09 4:56
membervineetas328-Aug-09 4:56 
QuestionMultiView and View Control for tabs. unable to access in javascript all the views controls from any view. Pin
setvij15-Jul-09 9:11
membersetvij15-Jul-09 9:11 
AnswerRe: MultiView and View Control for tabs. unable to access in javascript all the views controls from any view. Pin
ohads22-Aug-09 19:51
memberohads22-Aug-09 19:51 
QuestionColoured Tab Pin
ritudb26-May-09 5:27
memberritudb26-May-09 5:27 
QuestionCSS not working in my master page! Help! Pin
randydouglas200410-Feb-09 1:36
memberrandydouglas200410-Feb-09 1:36 
AnswerRe: CSS not working in my master page! Help! Pin
Wade Rothermel23-Mar-11 10:11
memberWade Rothermel23-Mar-11 10:11 
Generalchaahing ImageUrl do not work Pin
seahero20064-Dec-08 2:31
memberseahero20064-Dec-08 2:31 
SuggestionRe: chaahing ImageUrl do not work Pin
awaysahmad4u14-Sep-12 14:13
memberawaysahmad4u14-Sep-12 14:13 
Generalhi this is good controle Pin
khalid00044919-Nov-08 3:59
memberkhalid00044919-Nov-08 3:59 
GeneralThat explains it all Pin
marie_b17-Oct-08 10:51
membermarie_b17-Oct-08 10:51 
QuestionCausing Validation while tab switching... Pin
Member 442986619-Aug-08 0:37
memberMember 442986619-Aug-08 0:37 
GeneralMultiview control problem Pin
ashwapayroll22-Jun-08 22:44
memberashwapayroll22-Jun-08 22:44 
GeneralHi Pin
Ashrafur Rahaman9-Apr-08 8:57
memberAshrafur Rahaman9-Apr-08 8:57 
Generalnothing is clickable in view Pin
FaisalAzhar22-Feb-08 7:09
memberFaisalAzhar22-Feb-08 7:09 
GeneralGood Article Pin
Ganesan Sankaran22-Oct-07 20:35
memberGanesan Sankaran22-Oct-07 20:35 
QuestionHow to connect aspx form to tab 1, tab 2, etc? Pin
lovescalifornia218-Sep-07 12:51
memberlovescalifornia218-Sep-07 12:51 
GeneralDoes not work in IE6 Pin
Myangzki29-Aug-07 20:16
memberMyangzki29-Aug-07 20:16 
GeneralRe: Does not work in IE6 Pin
bartosz200715-Jan-10 0:52
memberbartosz200715-Jan-10 0:52 
GeneralThanks! Pin
LeluDallasMultpass27-Aug-07 12:09
memberLeluDallasMultpass27-Aug-07 12:09 
QuestionHow can I avoid error when switching between tabs? Pin
Ohavryl20-Aug-07 2:28
memberOhavryl20-Aug-07 2:28 
AnswerRe: How can I avoid error when switching between tabs? Pin
Brian Rush20-Aug-07 17:56
memberBrian Rush20-Aug-07 17:56 
GeneralRe: How can I avoid error when switching between tabs? Pin
Ohavryl20-Aug-07 22:59
memberOhavryl20-Aug-07 22:59 
AnswerRe: How can I avoid error when switching between tabs? Pin
Vaibhav Vadgama15-Jun-10 13:19
memberVaibhav Vadgama15-Jun-10 13:19 
GeneralDataBinding the Multiview Pin
stormcandi29-Jun-07 12:30
memberstormcandi29-Jun-07 12:30 
GeneralThanx for the help Pin
Jats_4ru26-Jun-07 3:20
memberJats_4ru26-Jun-07 3:20 
QuestionTab without post back Pin
pabidi23-Jun-07 0:30
memberpabidi23-Jun-07 0:30 
QuestionHow to play an MS PowerPoint show on ASP.Net Pin
khuzwayom15-Jun-07 4:33
memberkhuzwayom15-Jun-07 4:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 22 Feb 2006
Article Copyright 2006 by Brian Rush
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid