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">
tabstrips = "EditRecordTab"
tabheads = "TabStrip_1"
</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.
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