In this article I will explain with an example, how to maintain or retain the selected (active) tab in
Bootstrap Tabs on
PostBack in ASP.Net using C# and VB.Net.
This article makes use of
Bootstrap version 3.
Cause
Bootstrap Tabs are a set of plain HTML elements and are not part of ASP.Net ViewState. Hence its Tab selection is lost whenever
PostBack happens in ASP.Net.
Solution
Since the state of
Bootstrap Tabs is not automatically maintained, we will need to maintain its state through programming.
The selected tab index has to be stored in HiddenField before PostBack, so that the selected tab index is retained across PostBack.
HTML Markup
The HTML Markup consists of:
DIV – For displaying
Bootstrap Tab and panels.
The HTML DIV consists of a
Bootstrap Tab consisting of two tabs and two panels to which the
Bootstrap Tab plugin has been applied.
Applying Bootstrap Tab Plugin
Inside the HTML, the following
Bootstrap 3 CSS file is inherited.
1. bootstrap.min.css
1. jquery.min.js
2. bootstrap.min.js
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal</a></li>
<li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active"id="personal">
This is Personal Information Tab
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
<br/>
<br/>
<asp:Button Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
Maintaining Bootstrap Tabs Selected (Active) Tab on PostBack
Inside the
jQuery document ready event, first the value of the HiddenField is fetched.
If the HiddenField value is blank, then the default tab is Selected (set as Active tab).
Then, each HTML Anchor element inside the Tab Header is assigned a
jQuery click event handler.
Finally, when any Tab is clicked, the href attribute value is saved in the HiddenField.
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
Setting the HiddenField value after PostBack
Inside the Page Load event handler, the value of the HiddenField is fetched from the Request.Form collection inside the IsPostBack condition.
Finally, the fetched value is again set to the HiddenField.
Note: You can also use HiddenField Value property, but sometimes values set from client side are not reflected and hence Request.Form collection is used.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
TabName.Value = Request.Form[TabName.UniqueID];
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Me.IsPostBack Then
TabName.Value = Request.Form(TabName.UniqueID)
End If
End Sub
Screenshot
![Bootstrap 3: Bootstrap Tabs Maintain Selected (Active) Tab on PostBack in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
