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

Category > ASP.NET || Published on : Wednesday, November 4, 2015 || Views: 5693 || Maintain Bootstrap Selected Tab on postback in ASP.Net C# Bootstrap Selected Tab

Step 1:Create a aspx web page using the below codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 <html xmlns="">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></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 () {
    <form id="form1" runat="server">
            <!-- 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
                        <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>
                    <!-- 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 role="tabpanel" class="tab-pane" id="tab2">
                            You are in Tab2
                        <div role="tabpanel" class="tab-pane" id="tab3">
                            You are in Tab3
                    <!-- Tab Panes ends -->
                <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" />
            <!-- Panel ends -->

Step 2: Write the following codes in aspx code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

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

conclusion so we have learned How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#