Bootstrap Tabs Selected on PostBack in .Net
Aspx page
<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:HiddenField ID="TabName" runat="server" />
<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>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
TabName.Value = Request.Form[TabName.UniqueID];
}
}
Comments
Post a Comment