Bootstrap Tabs Maintain Selected Active Tab on PostBack in ASPNet

In this article I will explain how to maintain or retain the selected (active) tab in Bootstrap Tabs on PostBack in ASP.Net.

Note: In order to learn more about Bootstrap Tabs, please refer my article Simple Bootstrap Tabs example

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 Hidden Field before PostBack so that the selected tab index is retained across PostBacks.

Maintain Bootstrap Tabs Selected (Active) Tab on PostBack

Inside the jQuery document ready event, first the value of the Hidden Field is fetched. If the Hidden Field value is blank then the default tab is Selected (set as Active tab).

Each HTML Anchor element inside the Tab Header is assigned a click event handler. When any Tab is clicked, the href attribute value is saved in the Hidden Field.

<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>

This is Personal Information Tab

</div>

This is Employment Information Tab

</div>

<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />

<asp:HiddenField ID="TabName" runat="server" />

</div>

$(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>

On server side, the value of the Hidden Field is fetched from the Request.Form collection. The fetched value is again set into the Hidden Field in order to use it on client side.

Note: You can also use HiddenField Value property, but sometimes values set from client side are not reflected and hence to be on safer side I have used Request.Form collection.

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