Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET

Simple way to Design Tabs in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.92/5 (28 votes)
11 Jan 2012CPOL2 min read 324.8K   15.3K   50   24
This article will show how to Create Tabs in ASP.NET page using Buttons, MultiView Control and CSS

Introduction

This is another way to show Tabs in ASP.NET page using Buttons, Multiview Control and CSS.

Background

There are many ways of implementing a Tab in ASP.NET without using AJAX Control.

But many of the solutions use ASP.NET Menu control or a Custom Control to show up the Tab.

Moreover, with the use of ASP.NET menu control, it is not possible to highlight the selected Tab. This is where I came up with a simple approach to show Tabs using Command Buttons, CSS and little code behind code.

How it works ?

This is very simple to Implement.

Basically there will be two CSS styles.

One style will have an initial Background image and another style will have a different Background image to highlight the active Tab. On each button click, the CSS style of the button will be updated from Code Behind.

Below are the simple steps to understand this.

1. Use two images, one for initial styling and another to show the Selected Tab. (I used MS Paint to create these images. Doesn’t require much of skills)

InitialImage.png (Shown Initially)

SelectedButton.png (Shown on Selected Button)

2. Create two different styles, one to show up initially (.Initial and .Initial:hover - to change the style when the mouse pointer is moved over the button) and another to show the Selected Tab (.Clicked).

XML
<style type="text/css">
.Initial
{
  display: block;
  padding: 4px 18px 4px 18px;
  float: left;
  background: url("../Images/InitialImage.png") no-repeat right top;
  color: Black;
  font-weight: bold;
}
.Initial:hover
{
  color: White;
  background: url("../Images/SelectedButton.png") no-repeat right top;
}
.Clicked
{
  float: left;
  display: block;
  background: url("../Images/SelectedButton.png") no-repeat right top;
  padding: 4px 18px 4px 18px;
  color: Black;
  font-weight: bold;
  color: White;
}
</style>

3. Create ASP.NET Buttons corresponding to each tab and set the background Image to the initial styling.

a. For each button ensure that the BorderStyle is set to "None" so that it looks like an image and not as a button.

4. Create a Multi View Control and different views corresponding to each tab.

XML
  <body style="font-family: tahoma">
  <form id="form1" runat="server">
    <table width="80%" align="center">
      <tr>
        <td>
          <asp:Button Text="Tab 1" BorderStyle="None" ID="Tab1" CssClass="Initial" runat="server"
              OnClick="Tab1_Click" />
          <asp:Button Text="Tab 2" BorderStyle="None" ID="Tab2" CssClass="Initial" runat="server"
              OnClick="Tab2_Click" />
          <asp:Button Text="Tab 3" BorderStyle="None" ID="Tab3" CssClass="Initial" runat="server"
              OnClick="Tab3_Click" />
          <asp:MultiView ID="MainView" runat="server">
            <asp:View ID="View1" runat="server">
              <table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
                <tr>
                  <td>
                    <h3>
                      <span>View 1 </span>
                    </h3>
                  </td>
                </tr>
              </table>
            </asp:View>
            <asp:View ID="View2" runat="server">
              <table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
                <tr>
                  <td>
                    <h3>
                      View 2
                    </h3>
                  </td>
                </tr>
              </table>
            </asp:View>
            <asp:View ID="View3" runat="server">
              <table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
                <tr>
                  <td>
                    <h3>
                      View 3
                    </h3>
                  </td>
                </tr>
              </table>
            </asp:View>
          </asp:MultiView>
        </td>
      </tr>
    </table>
  </form>
</body>



5. On each button click, set the style of the Clicked button to take a new value.


C#
public partial class SimpleTabControl : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      Tab1.CssClass = "Clicked";
      MainView.ActiveViewIndex = 0;
    }
  }

  protected void Tab1_Click(object sender, EventArgs e)
  {
    Tab1.CssClass = "Clicked";
    Tab2.CssClass = "Initial";
    Tab3.CssClass = "Initial";
    MainView.ActiveViewIndex = 0;
  }

  protected void Tab2_Click(object sender, EventArgs e)
  {
    Tab1.CssClass = "Initial";
    Tab2.CssClass = "Clicked";
    Tab3.CssClass = "Initial";
    MainView.ActiveViewIndex = 1;
  }

  protected void Tab3_Click(object sender, EventArgs e)
  {
    Tab1.CssClass = "Initial";
    Tab2.CssClass = "Initial";
    Tab3.CssClass = "Clicked";
    MainView.ActiveViewIndex = 2;
  }
}

6. Finally you can get your desired style. (Please use the attached Zip to get the code)

Tabs1.png

Tabs2.png

Conclusion

This is another simple way of Showing Tabs and Highlighting an active tab.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Stephen Gatonga4-May-22 22:57
Stephen Gatonga4-May-22 22:57 
PraiseMy vote of 5 Pin
KY_newbie28-Jun-18 17:54
KY_newbie28-Jun-18 17:54 
PraiseSimple, elegant and useful. Pin
marcelo iván rojas hernández6-Jun-18 4:28
marcelo iván rojas hernández6-Jun-18 4:28 
GeneralMy vote of 5 Pin
Member 410934417-May-18 17:25
Member 410934417-May-18 17:25 
GeneralMy vote of 5 Pin
NF Khan11-Feb-17 21:56
NF Khan11-Feb-17 21:56 
GeneralVote of execellence Pin
Ritesh bagalkoti11-Nov-14 21:55
Ritesh bagalkoti11-Nov-14 21:55 
QuestionGood job dude.. Pin
umeshkumarbn16-Oct-14 23:48
umeshkumarbn16-Oct-14 23:48 
SuggestionThis is awesome!!! Pin
simpa29-Jul-13 21:06
simpa29-Jul-13 21:06 
SuggestionI Prefer CSS Tabs Pin
jgakenhe26-Jun-13 8:26
professionaljgakenhe26-Jun-13 8:26 
GeneralRe: I Prefer CSS Tabs Pin
veasnamuch21-Apr-15 18:23
veasnamuch21-Apr-15 18:23 
GeneralRe: I Prefer CSS Tabs Pin
jgakenhe21-Apr-15 18:37
professionaljgakenhe21-Apr-15 18:37 
GeneralMy vote of 4 Pin
jgakenhe26-Jun-13 8:24
professionaljgakenhe26-Jun-13 8:24 
GeneralThank you for everything Pin
meysambayat1-May-13 19:35
meysambayat1-May-13 19:35 
Generalthankss Pin
vihangshah9-Apr-13 20:58
vihangshah9-Apr-13 20:58 
QuestionMaster pages Pin
Member2222313-Dec-12 11:24
Member2222313-Dec-12 11:24 
AnswerRe: Master pages Pin
Ritesh bagalkoti11-Nov-14 22:00
Ritesh bagalkoti11-Nov-14 22:00 
GeneralMy vote of 5 Pin
Amir Amay30-Oct-12 22:58
Amir Amay30-Oct-12 22:58 
QuestionDesign Tabs In asp.net Pin
sasipriyakalpana24-Sep-12 0:38
sasipriyakalpana24-Sep-12 0:38 
QuestionAdding css in Tabs Dynamically.. Pin
Member 937108520-Aug-12 22:50
Member 937108520-Aug-12 22:50 
GeneralMy vote of 4 Pin
rahulpriyan22-Jan-12 18:10
rahulpriyan22-Jan-12 18:10 
GeneralMy vote of 5 Pin
Vince P.17-Jan-12 8:17
Vince P.17-Jan-12 8:17 
GeneralMy vote of 5 Pin
demouser74311-Jan-12 21:09
demouser74311-Jan-12 21:09 
QuestionNice Pin
Prabu ram11-Jan-12 19:15
Prabu ram11-Jan-12 19:15 
GeneralMy vote of 5 Pin
Anurag Gandhi11-Jan-12 4:27
professionalAnurag Gandhi11-Jan-12 4:27 

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

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