Category >
ASP.NET
|| Published on :
Wednesday, November 4, 2015 || Views:
5849
||
Maintain Bootstrap Selected Tab on postback in ASP.Net C# Bootstrap Selected Tab
Step 1:Create a aspx web page using the below codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<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>
Step 2: Write the following codes in aspx code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
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";
}
}
conclusion so we have learned How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#