Please disable your adblock and script blockers to view this page
 

Maintain Bootstrap Selected Tab on postback in ASP.Net inside Ajax UpdatePanel

Introduction: In this article I am going to demonstrate how to use bootstrap responsive tab in asp.net web application to create tab panels and maintain active tab even across partial postback inside updatepanel. We will also learn how to select any tab from code behind on any event e.g. button click.
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 inside update panel 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 after AJAX UpdatePanel refresh.

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">
        function pageLoad() {
            maintainSelectedTab();
        }
        function maintainSelectedTab() {
            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>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <!-- 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 -->
                </ContentTemplate>
            </asp:UpdatePanel>
        </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 inside updatepanel the selection i.e. tab3 will be maintained.
Also note that we can also make any tab active 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 EventArgsHandles btnSelectTab2.Click
        hfTab.Value = "tab2"
    End Sub
    Protected Sub btnSelectTab3_Click(sender As Object, e As EventArgsHandles 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 »

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.. ConversionConversion EmoticonEmoticon