How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#

  ASP.NET   Wednesday, November 4, 2015   1987 | 4 Comments | No Download | No Demo | Pawan kumar
 Tags: 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#


Post Comments

if you have some suggestion, question, request on How to Maintain Bootstrap Selected Tab on postback in ASP.Net C#.

Please use the comment box to express your views.

 

Comments: