Bootstrap tabs and ASP.NET AJAX postback

When you are using Twitter Bootstrap tabs combined with AJAX ASP.NET and some content inside the panes is firing a page postback then you have a problem. If you are viewing the content of the second pane and do a postback, then  the first tab and he first panel will be actived.

Imagine both panels have sorted tables. If the user is viewing the table of the second tab and sorts the table, the focus comes back to the first pane after the postback.

This is how I built a solution:

• Make the pills accessible from code behind adding an ID and runat="server".

• Make the tabs panes accessible from code behind  adding an ID and runat="server".

• Add the ID of the pane that the table belongs to to the Command Name of the element that is sorting the table, for example a linkbutton:

• On the linkbutton sort click event call the funtion that binds the data and set the active pane using the function I've called ManageTabsPostBack.