How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#,VB

Introduction: In this article I am going to explain how to use bootstrap responsive tab in asp.net to create tab panels and maintain active tab even across postback. We will also learn how to select any tab from code behind on any event.
How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#,VB
In previous article i explained how to Show and Auto close bootstrap alert messages after few seconds in Asp.Net and Ajax tabcontainer example to create multiple tabs/panels in asp.net

Description: By default tab selection is lost whenever a postback occurs on ASP.Net page so we need some trick to retain the selected tab even after postback. We can use asp.net hiddenfield control to store the selected tab and after postback we can get the last selected tab value from this hiddenfield control and select that tab again.

Implementation: Let’s create a sample web page to demonstrate the implementation of bootstrap tab and maintain its selection across postback.

Asp.Net C# Section

HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var selectedTab = $("#<%=hfTab.ClientID%>");
            var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                selectedTab.val($(this).attr("href").substring(1));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- Panel starts -->
            <div class="panel panel-default" style="width: 400px; padding: 5px; margin: 5px">
                <div id="dvTab">
                    <!-- Navigation Tabs starts -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1
                        </a></li>
                        <li><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab2</a></li>
                        <li><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab3</a></li>
                    </ul>
                    <!-- Navigation Tabs ends -->
                    <!-- Tab Panes starts -->
                    <div class="tab-content" style="padding-top: 10px">
                        <div role="tabpanel" class="tab-pane active" id="tab1">
                            You are in Tab1
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab2">
                            You are in Tab2
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tab3">
                            You are in Tab3
                        </div>
                    </div>
                    <!-- Tab Panes ends -->
                </div>
                <br />
                <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click"  CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab2" Text="Select Tab2" runat="server" OnClick="btnSelectTab2_Click" CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab3" Text="Select Tab3" runat="server" OnClick="btnSelectTab3_Click" CssClass="btn btn-primary" />
                <asp:HiddenField ID="hfTab" runat="server" />
            </div>
            <!-- Panel ends -->
        </div>
    </form>
</body>
</html>
  • If you observe above code I have added the required bootstrap js and css file reference. It is required to use the bootstrap tools.

Asp.Net C# Code

protected void btnSubmit_Click(object sender, EventArgs e)
    {
     //write your code here
    }

    protected void btnSelectTab2_Click(object sender, EventArgs e)
    {
        hfTab.Value = "tab2";
    }

protected void btnSelectTab3_Click(object sender, EventArgs e)
    {
        hfTab.Value = "tab3";
    }


Test Case : Select any of the three tab e.g. tab3 and then click on first  'btnSumit' button. It will cause postback() but after postback the selection i.e. tab3 will be maintained.
Also note that we can also select any tab through code by setting the desired tab id in the hiddenfield control as i have demonstrated on second and third button.

Asp.Net VB Section

Design the page same as we designed above in asp.net C# section, but replace the 3 buttons HTML with the following
<asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab2" Text="Select Tab2" runat="server" CssClass="btn btn-primary" />
                <asp:Button ID="btnSelectTab3" Text="Select Tab3" runat="server" CssClass="btn btn-primary" />

Asp.Net VB Code

  Protected Sub btnSubmit_Click(sender As Object, e As EventArgsHandles btnSubmit.Click
     'write your code here
    End Sub
  Protected Sub btnSelectTab2_Click(sender As Object, e As EventArgs) Handles btnSelectTab2.Click
        hfTab.Value = "tab2"
    End Sub
    Protected Sub btnSelectTab3_Click(sender As Object, e As EventArgs) Handles btnSelectTab3.Click
        hfTab.Value = "tab3"

    End Sub

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

2 comments

Click here for comments
Unknown
admin
April 04, 2020 ×

Super neat and clear solution... Thanks Lalit

Reply
avatar
April 06, 2020 ×

welcome dear. i am glad this article helped you..

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..