Introduction: In this article I
am going to explain how to use bootstrap responsive tab in asp.net to create tab panels and maintain
active tab even across postback. We will also learn how to select any tab from
code behind on any event.
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 Ajax modalpopupextender example to open login form in popup and Jquery ajax json to insert data into sql server database without postback and Jquery and json to bind gridview from sql server database in asp.net
Description: By default tab
selection is lost whenever a postback occurs 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 across postback.
Asp.Net C# Section
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></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
() {
selectedTab.val($(this).attr("href").substring(1));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- 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
</a></li>
<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>
</ul>
<!--
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>
<div role="tabpanel" class="tab-pane" id="tab2">
You are in Tab2
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
You are in Tab3
</div>
</div>
<!-- Tab Panes ends -->
</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>
<!-- Panel ends -->
</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 the selection i.e. tab3 will be maintained.
Also note that we can also select any tab 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.
2 comments
Click here for commentsSuper neat and clear solution... Thanks Lalit
Replywelcome dear. i am glad this article helped you..
ReplyIf 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..