In this article I will explain with an example, how to maintain or retain the selected (active) tab in Bootstrap 5 Tabs on PostBack in ASP.Net using C# and VB.Net.
This article makes use of Bootstrap version 5.
Note: For more details on how to use Bootstrap Tabs, please refer my article Bootstrap 5: 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 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 5 CSS file is inherited.
1. bootstrap.min.css
 
And then, the following Bootstrap 5 and jQuery JS files are inherited.
1. jquery.min.js
2. bootstrap.bundle.min.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js'></script>
<div style="width: 500px; padding: 10px; margin: 10px">
    <ul class="nav nav-tabs" id="Tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="personal-tab" data-bs-toggle="tab" data-bs-target="#personal"
                type="button" role="tab" aria-controls="personal" aria-selected="true">
                Personal</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="employment-tab" data-bs-toggle="tab" data-bs-target="#employment"
                type="button" role="tab" aria-controls="employment" aria-selected="false">
                Employment</button>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
            This is Personal Information Tab
        </div>
        <div class="tab-pane fade" id="employment" role="tabpanel" aria-labelledby="employment-tab">
            This is Employment Information Tab
        </div>
    </div>
    <br />
    <br />
    <asp:Button ID="btnSubmit" 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).
Next, each HTML Anchor element inside the Tab Header is assigned a jQuery click event handler.
Finally, when any Tab is clicked, the data-bs-target attribute value is saved in the HiddenField.
<script type="text/javascript">
    $(function () {
        var tabName = $("[id*= TabName]").val() != "" ? $("[id*= TabName]").val() :"personal";
        new bootstrap.Tab($('#Tabs button[data-bs-target="#' + tabName + '"]')).show();
        $("#Tabs button").click(function () {
            $("[id*=TabName]").val($(this).attr("data-bs-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.
 
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 5: Bootstrap Tabs Maintain Selected (Active) Tab on PostBack in ASP.Net
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions