Bootstrap Nav-tab event to run on the c#server side

Question

I am using the following code to use tabs in my Asp.Net application, is there any way to add an event so that when switching tab run some event on the server side equal to the ajaxcontroltoolkit Tabcontainer event ? (http://www.ajaxcontroltoolkit.com/Tabs/Tabs.aspx)

I’m not using Tabcontainer because I can’t apply Bootstrap to it.

I found the code below but it does on the client side.

https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

Answer 1

Instead of you using normal link you can use Linkbutton from Asp.net and grab the event from the server-side click:

<ul id="myTab" class="nav nav-tabs">
<li class="active"><asp:LinkButton data-toggle="tab" OnClick="Method_Click">Home</a></li>
<li class=""><asp:LinkButton data-toggle="tab" OnClick="Method_Click"></li>
</ul>
<div id="myTabContent" class="tab-content">
 <div class="tab-pane fade active in" id="home">
     home tab!
  </div>
   <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>