Bootstrap 4 Bootstrap Tabs Maintain Selected Active Tab on PostBack in ASPNet

In this article I will explain with an example, how to maintain or retain the selected (active) tab in Bootstrap 4 Tabs on PostBack in ASP.Net using C# and VB.Net.

This article makes use of Bootstrap version 4.

Note: For more details on how to use Bootstrap Tabs, please refer my article Bootstrap 4: 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 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.

There is also an ASP.Net HiddenField and a Button control.

Applying Bootstrap Tab Plugin

Inside the HTML, the following Bootstrap 4 CSS file is inherited.

1. bootstrap.min.css

And then, the following Bootstrap 4 and jQuery JS files are inherited.

1. jquery.min.js

2. bootstrap.bundle.min.js

<a class="nav-link active" id="personal-tab" data-toggle="tab" data-target="#personal"

type="button" role="tab" aria-controls="personal" aria-selected="true">Personal</a>

</li>

<a class="nav-link" id="employment-tab" data-toggle="tab" data-target="#employment"

type="button" role="tab"aria-controls="employment" aria-selected="false">Employment</a>

</li>

</ul>

This is Personal Information Tab</div>

This is Employment Information Tab</div>

</div>

<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 handler, 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 data-target attribute value is saved in the HiddenField.

$(function () {

var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";

$('#Tabs a[data-target="#' + tabName + '"]').tab('show');

$("#Tabs a").click(function () {

$("[id*=TabName]").val($(this).attr("data-target").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.

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