Tabstrip Without Post back

• Download source - 30.2 KB

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 going to design 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 to me in case you have any doubts or concerns.