Maintain Bootstrap Selected Tab on postback in ASP.Net inside Ajax UpdatePanel ~ Asp.Net,C#.Net,VB.Net,MVC,jQuery,JavaScipt,AJAX,WCF,Sql Server example

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

and Call java script function from code behind file in asp.net and Jquery ajax json to call server side functions without any post back and Javascript to enable disable controls on textbox value change or typing text in textbox

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

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>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<li><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab1

</a></li>

</ul>

You are in Tab1

</div>

You are in Tab2

</div>

You are in Tab3

</div>

</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>

</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 EventArgs) Handles btnSubmit.Click

'write your code here

End Sub

Protected Sub btnSelectTab2_Click(sender As Object, e As EventArgs) Handles btnSelectTab2.Click

hfTab.Value = "tab2"

End Sub

Protected Sub btnSelectTab3_Click(sender As Object, e As EventArgs) Handles 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.

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

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

Related Post