Click here to Skip to main content
Click here to Skip to main content

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

Introduction

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

Background

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"
</script>

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 <
    /asp:LinkButton></td>
<td align="Left" ><asp:LinkButton OnClientClick=
    "InitializeTabstrip('EditRecordTab',2, this); 
    return(false);" runat="server" ID ="SecondButtonCtl" 
    Font-Underline="false"> Second <
    /asp:LinkButton></td>
<td align="Left" ><asp:LinkButton OnClientClick=
    "InitializeTabstrip('EditRecordTab',3, this); 
    return(false);" runat="server" ID ="ThirdButtonCtl"   
    Font-Underline="false"> Third <
    /asp:LinkButton></td>
<td ><input type="hidden" id="EditRecordTabState" 
    runat="server" value="1" enableviewstate="true" /> 
    </td>
<td ></td>
</tr>
</table>

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%">
    <tr>
    <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>
    </td>
    </tr>
    </table>

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.

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

jebarson
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, ASP.net, SL, WCF, WPF and many more.
 
You can visit my site at http://www.jebarson.info
 
Follow me on twitter @jebarson007
Follow on   Twitter

Comments and Discussions

 
GeneralCool Pinmemberkeyur soni5-Feb-10 19:00 
GeneralI have a problem with the tabstrip code... Pinmemberkatski116-Nov-08 11:53 
GeneralRe: I have a problem with the tabstrip code... Pinmemberjebarson13-Nov-08 4:21 
GeneralRe: I have a problem with the tabstrip code... Pinmemberkatski1119-Nov-08 5:11 
GeneralFavor... Translate VB Code to C# Pinmemberkatski1125-Sep-08 2:56 
GeneralRe: Favor... Translate VB Code to C# Pinmemberjebarson29-Sep-08 7:19 
GeneralRe: Favor... Translate VB Code to C# Pinmemberkatski112-Oct-08 8:15 
GeneralError while accessing page PinmemberSanspirit7-Apr-08 1:43 
AnswerRe: Error while accessing page Pinmemberjebarson9-Apr-08 10:41 
QuestionHow to make nested Tabstrips? PinmemberFlemming Munk28-Nov-07 20:52 
AnswerRe: How to make nested Tabstrips? Pinmemberjebarson29-Nov-07 4:33 
GeneralRe: How to make nested Tabstrips? [modified] PinmemberDane Weasel29-Nov-07 7:00 
GeneralNice PinmemberSameh Zaghloul17-Aug-07 23:46 
AnswerRe: Nice Pinmemberjebarson18-Aug-07 22:39 
GeneralExcellent! PinmemberRajLetsDoProgramming10-Jul-07 22:39 
AnswerRe: Excellent! [modified] Pinmemberjebarson11-Jul-07 3:54 
GeneralCool! Pinmemberinetfly1236-Feb-07 5:10 
GeneralRe: Cool! Pinmemberjebarson7-Feb-07 0:17 
GeneralRe: but Firefox exception... Pinmemberrghubert18-Feb-07 23:43 
GeneralRe: but Firefox exception... Pinmemberjebarson19-Feb-07 5:26 

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.141216.1 | Last Updated 2 Feb 2007
Article Copyright 2007 by jebarson
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid