Click here to Skip to main content
12,697,190 members (25,776 online)
Click here to Skip to main content
Add your own
alternative version


63 bookmarked

Tabstrip without post back

, 2 Feb 2007
Rate this:
Please Sign up or sign in to vote.
An article to create tabstrip without post back

Tab Strip


The article will help you in making a tabstrip control which can switch between tabs without a post back.


It was couple of months before I got into the situation of implementing a tabstrip in my project and I started with the implementation of Microsoft's multi page control but I found that it would be irritating for the user to post back the page for the purpose of switching between the tabstrips. So, I sat down and started writing my own code in javascript which will need no post back for the switching of tabs.

Using the code

I have used two tables; one is for tabstrip head and another for the tab page. You can change the design as you wish. First I will declare the tabstrip head and the tabstrip page so that the script can come to know the tabstrips used and initialize them accordingly. If you have more than one tabstrip for a page then you can declare by comma separated as tabstrip head and tabstrip page respectively.

<script language="javascript" type="text/javascript">
    // declare the tabstrip at the top of the page
    // if more than one tabstrip then, 
    // tabstrips = "tabstrip1,tabstrip2"
    tabstrips = "EditRecordTab" 
    tabheads = "TabStrip_1" //tabheads="tabhead_1,tabhead_2"

Then I am gonna design the the tabstrip head. I am using the hidden field to store the tab page index currently showing. This can be used either to:

  • Initialize the tabstrip specifying the page it has to show initially.
  • If you set that to empty then no page will be shown by default.
  • It also maintains the state of the tab page if post back happens.
<table id="TabStrip_1" cellspacing="0" >
<tr >
<td align="Left" ><asp:LinkButton OnClientClick=
    "InitializeTabstrip('EditRecordTab',1, this); 
    return(false);" runat="server" ID ="FirstButtonCtl"  
    Font-Underline="false" > First <
<td align="Left" ><asp:LinkButton OnClientClick=
    "InitializeTabstrip('EditRecordTab',2, this); 
    return(false);" runat="server" ID ="SecondButtonCtl" 
    Font-Underline="false"> Second <
<td align="Left" ><asp:LinkButton OnClientClick=
    "InitializeTabstrip('EditRecordTab',3, this); 
    return(false);" runat="server" ID ="ThirdButtonCtl"   
    Font-Underline="false"> Third <
<td ><input type="hidden" id="EditRecordTabState" 
    runat="server" value="1" enableviewstate="true" /> 
<td ></td>

Below is the designing of the tab pages. I have added three user controls inside the div. You can add any control inside the div. The id of the control specified in the "div" and the InitializeTabstrip function should be the same

<table width="100%">
    <td >
    <div id="EditRecordTab_1" visible="false"><
        usrctl:First   ID="FirstCtl" runat="server" /></div>
    <div id="EditRecordTab_2" visible="false"><
        usrctl:Second  ID="SecondCtl" runat="server"  /></div>
    <div id="EditRecordTab_3" visible="false"><
        usrctl:Third ID="ThirdCtl" runat="Server" /></div>

Don't forget to add the reference for the javascript file attached

Please rate the article and don't hesitate to write me in case you have any doubts or concerns.


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


About the Author

Software Developer (Senior) Microsoft Corporation
India India
I work for Microsoft on MS technologies for application development. My interests include .net, WCF, Azure, Windows Phone,, SL, WCF, WPF and many more.

You can visit my site at

Follow me on twitter @jebarson007

You may also be interested in...

Comments and Discussions

GeneralCool Pin
keyur soni5-Feb-10 19:00
memberkeyur soni5-Feb-10 19:00 
GeneralI have a problem with the tabstrip code... Pin
katski116-Nov-08 11:53
memberkatski116-Nov-08 11:53 
GeneralRe: I have a problem with the tabstrip code... Pin
jebarson13-Nov-08 4:21
memberjebarson13-Nov-08 4:21 
GeneralRe: I have a problem with the tabstrip code... Pin
katski1119-Nov-08 5:11
memberkatski1119-Nov-08 5:11 
GeneralFavor... Translate VB Code to C# Pin
katski1125-Sep-08 2:56
memberkatski1125-Sep-08 2:56 
GeneralRe: Favor... Translate VB Code to C# Pin
jebarson29-Sep-08 7:19
memberjebarson29-Sep-08 7:19 
GeneralRe: Favor... Translate VB Code to C# Pin
katski112-Oct-08 8:15
memberkatski112-Oct-08 8:15 
GeneralError while accessing page Pin
Sanspirit7-Apr-08 1:43
memberSanspirit7-Apr-08 1:43 
AnswerRe: Error while accessing page Pin
jebarson9-Apr-08 10:41
memberjebarson9-Apr-08 10:41 
QuestionHow to make nested Tabstrips? Pin
Flemming Munk28-Nov-07 20:52
memberFlemming Munk28-Nov-07 20:52 
AnswerRe: How to make nested Tabstrips? Pin
jebarson29-Nov-07 4:33
memberjebarson29-Nov-07 4:33 
GeneralRe: How to make nested Tabstrips? [modified] Pin
Dane Weasel29-Nov-07 7:00
memberDane Weasel29-Nov-07 7:00 
GeneralNice Pin
Sameh Zaghloul17-Aug-07 23:46
memberSameh Zaghloul17-Aug-07 23:46 
AnswerRe: Nice Pin
jebarson18-Aug-07 22:39
memberjebarson18-Aug-07 22:39 
GeneralExcellent! Pin
RajLetsDoProgramming10-Jul-07 22:39
memberRajLetsDoProgramming10-Jul-07 22:39 
AnswerRe: Excellent! [modified] Pin
jebarson11-Jul-07 3:54
memberjebarson11-Jul-07 3:54 
GeneralCool! Pin
inetfly1236-Feb-07 5:10
memberinetfly1236-Feb-07 5:10 
GeneralRe: Cool! Pin
jebarson7-Feb-07 0:17
memberjebarson7-Feb-07 0:17 
GeneralRe: but Firefox exception... Pin
rghubert18-Feb-07 23:43
memberrghubert18-Feb-07 23:43 
GeneralRe: but Firefox exception... Pin
jebarson19-Feb-07 5:26
memberjebarson19-Feb-07 5:26 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 2 Feb 2007
Article Copyright 2007 by jebarson
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid