Remain bootstrap tab after postback c#

Well, I had this issue already and I solved it this way:

1. Include a new HiddenField on your page and set its value to the first tab that need to be shown:

   <asp:HiddenField ID="hidTAB" runat="server" Value="image" />
   

2. On every click function you defined to alternate the tabs, set the HiddenField value to the actual tab clicked.

   document.getElementById('<%=hidTAB.ClientID %>').value = "image";
   

3. On your jQuery document.ready function, use the HiddenField value to alternate to the last tab opened before the Postback.

   $(document).ready( function(){
       var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
       $( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
   });
   

Here's the Bootstrap Tab Documentation and here's the jQuery Ready documentation

With reference to the above ideas here is how I did it (full code included)

In your HTML Page, in the < Head > section put

<script type="text/javascript">
    $(document).ready(function () {
        var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
        $('#myTabs a[href="' + tab + '"]').tab('show');
    });
</script>

in the < body > section put a hiddenfield

<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />

and also in the < body > section have the Bootstrap 3.0 related code

<ul class="nav nav-tabs" id="myTabs">
  <li><a href="#tab1" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" data-toggle="tab">another page</a></li>
</ul>

Do not set any tab to active (this is set by the initial Value="#tab1" of the Hiddenfield).

Then add a button to the tab2 DIV

like so:

<div class="tab-pane" id="tab2">
  <asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
  <asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>

Lastly add your c# code behind to set the value of the hiddenfield

protected void FileUploadButton_Click(object sender, EventArgs e)
{
      hidTAB.Value = "#tab2";
}

on posting back the JQuery will read the new value in the hiddenfield and show tab2 :)

Hope this helps someone.

Trev.

Please try this

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
    <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
    </a></li>
    <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
 </ul>
<!-- Tab panes -->
 <div class="tab-content" style="padding-top: 20px">
    <div role="tabpanel" class="tab-pane active" id="personal">
        This is Personal Information Tab
    </div>
    <div role="tabpanel" class="tab-pane" id="employment">
        This is Employment Information Tab
    </div>
 </div>
 </div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>