Bootstrap Tabs Maintain Selected (Active) Tab on PostBack inside ASP.Net UpdatePanel using jQuery

nadeem12...

SOLVED CLOSED ACTIVE ANSWERED
User: nadeem1218
Posted: on Feb 05, 2018 12:13 AM
Forum: ASP.Net AJAX
Answer: 2
Views: 15368

Hello,

I'm trying to implement the below functionality but still im unable to retain the active tab on postback.

https://www.aspsnippets.com/Articles/Bootstrap-Tabs-Maintain-Selected-Active-Tab-on-PostBack-in-ASPNet.aspx

Here is my code. When I debug, I'm getting tabName value as null.

Thanks

<asp:Content ID="Content1" ContentPlaceHolderID="head" 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>
</asp:Ccontent>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:ScriptManager runat="server" ID="ScrMgr"></asp:ScriptManager>
<div id="main-content">
<ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="information" aria-selected="true">Asset Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="employee-tab" data-toggle="tab" href="#employee" role="tab" aria-controls="employee" aria-selected="false">Employee Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="documents-tab" data-toggle="tab" href="#documents" role="tab" aria-controls="documents" aria-selected="false">Related Documents</a>
</li>
<li class="nav-item">
<a class="nav-link" id="transfer-tab" data-toggle="tab" href="#transfer" role="tab" aria-controls="transfer" aria-selected="false">Transfer History</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="information" role="tabpanel" aria-labelledby="information-tab">
<asp:UpdatePanel runat="server" ID="upl">
<ContentTemplate>
Tab-1 content
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="tab-pane fade" id="employee" role="tabpanel" aria-labelledby="employee-tab">
<h4 class="mb-3">Employee Details</h4>
<div class="row">

<div class="col-md-3 mb-3">
<label for="txtEmpId">Employee Id<span class="text-muted">(Required)</label>
<asp:RequiredFieldValidator runat="server" ID="rfv7" ControlToValidate="txtEmpId" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtEmpId" CssClass="form-control" OnTextChanged="txtEmpId_TextChanged" AutoPostBack="true" MaxLength="6"></asp:TextBox>
                
</div>
<div class="col-md-6 mb-3">
<label for="txtName">Name<span class="text-muted">&nbsp;(Full name & other details will be automatically fetched based on EmpId)</span></label>
<asp:TextBox runat="server" ID="txtName" CssClass="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="row">
    <div class="col-md-4 mb-3">
<label for="ddlDepartment">Company Code</label>
<asp:RequiredFieldValidator runat="server" ID="rfv3" ControlToValidate="ddlCompany" InitialValue="0" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
</asp:RequiredFieldValidator>
<asp:DropDownList runat="server" ID="ddlCompany" CssClass="form-control" AppendDataBoundItems="true">
<asp:ListItem Text="Please select" Value="0" Selected="True"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-4 mb-3">
<label for="ddlDepartment">Department</label>
<asp:RequiredFieldValidator runat="server" ID="rfv8" InitialValue="0" ControlToValidate="ddlDepartment" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
</asp:RequiredFieldValidator>
<asp:DropDownList runat="server" ID="ddlDepartment" AppendDataBoundItems="true" CssClass="form-control">
<asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-md-4 mb-3">
<label for="ddlLocation">Location</label>
<asp:RequiredFieldValidator runat="server" ID="rfv9" InitialValue="0" ControlToValidate="ddlLocation" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
</asp:RequiredFieldValidator>
<asp:DropDownList runat="server" ID="ddlLocation" AppendDataBoundItems="true" CssClass="form-control">
<asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
</asp:DropDownList>

</div>

</div>
</div>
<div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">Tab Content-3
</div>
<div class="tab-pane fade" id="transfer" role="tabpanel" aria-labelledby="transfer-tab">
TTab-4 content
</div>
</div>
</div>
 <asp:HiddenField ID="TabName" runat="server" />
</asp:Content>

protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack)
        {
            TabName.Value = Request.Form[TabName.UniqueID];
        }
}

nagaraju...

0 7

Reply
ANSWER
User: nagaraju60
Replied: on Feb 06, 2018 12:37 AM
Report

Dear @nadeem1218,

Please refer below code. its working perfectly.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">

        <script type="text/javascript">
            $(function () {
                SetTabs();
            });
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        SetTabs();
                    }
                });
            };
            function SetTabs() {
                var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "information";
                $('#main-content a[href="#' + tabName + '"]').tab('show');
                $("#main-content a").click(function () {
                    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
                });
            };
        </script>

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

        <div>

            <asp:UpdatePanel runat="server" ID="upl">
                <ContentTemplate>

                    <div id="main-content">
                        <ul class="nav nav-pills" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="information" aria-selected="true">Asset Details</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="employee-tab" data-toggle="tab" href="#employee" role="tab" aria-controls="employee" aria-selected="false">Employee Information</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="documents-tab" data-toggle="tab" href="#documents" role="tab" aria-controls="documents" aria-selected="false">Related Documents</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="transfer-tab" data-toggle="tab" href="#transfer" role="tab" aria-controls="transfer" aria-selected="false">Transfer History</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="information" role="tabpanel" aria-labelledby="information-tab">
                                Tab-1 content
                       
                            </div>
                            <div class="tab-pane fade" id="employee" role="tabpanel" aria-labelledby="employee-tab">
                                <h4 class="mb-3">Employee Details</h4>
                                <div class="row">

                                    <div class="col-md-3 mb-3">
                                        <label for="txtEmpId">Employee Id<span class="text-muted">(Required)</label>
                                        <asp:RequiredFieldValidator runat="server" ID="rfv7" ControlToValidate="txtEmpId" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                        </asp:RequiredFieldValidator>
                                        <asp:TextBox runat="server" ID="txtEmpId" CssClass="form-control" AutoPostBack="true" MaxLength="6"></asp:TextBox>

                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="txtName">Name<span class="text-muted">&nbsp;(Full name & other details will be automatically fetched based on EmpId)</span></label>
                                        <asp:TextBox runat="server" ID="txtName" CssClass="form-control" ReadOnly="true" OnTextChanged="txtName_TextChanged"></asp:TextBox>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="ddlDepartment">Company Code</label>
                                        <asp:RequiredFieldValidator runat="server" ID="rfv3" ControlToValidate="ddlCompany" InitialValue="0" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                        </asp:RequiredFieldValidator>
                                        <asp:DropDownList runat="server" ID="ddlCompany" CssClass="form-control" AppendDataBoundItems="true">
                                            <asp:ListItem Text="Please select" Value="0" Selected="True"></asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="ddlDepartment">Department</label>
                                        <asp:RequiredFieldValidator runat="server" ID="rfv8" InitialValue="0" ControlToValidate="ddlDepartment" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                        </asp:RequiredFieldValidator>
                                        <asp:DropDownList runat="server" ID="ddlDepartment" AppendDataBoundItems="true" CssClass="form-control">
                                            <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                                        </asp:DropDownList>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="ddlLocation">Location</label>
                                        <asp:RequiredFieldValidator runat="server" ID="rfv9" InitialValue="0" ControlToValidate="ddlLocation" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                        </asp:RequiredFieldValidator>
                                        <asp:DropDownList runat="server" ID="ddlLocation" AppendDataBoundItems="true" CssClass="form-control">
                                            <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                                        </asp:DropDownList>

                                    </div>

                                </div>
                            </div>
                            <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">
                                Tab Content-3
                            </div>
                            <div class="tab-pane fade" id="transfer" role="tabpanel" aria-labelledby="transfer-tab">
                                <asp:Label runat="server" ID="lblMsg"></asp:Label>
                                <asp:Button runat="server" ID="btnTest" Text="Test" OnClick="btnTest_Click" CssClass="btn btn-primary" CausesValidation="false" />
                            </div>
                        </div>
                    </div>
                    <asp:HiddenField ID="TabName" runat="server" Value="information" />

                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Code

    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack)
        {
            TabName.Value = Request.Form[TabName.UniqueID];
        }
    }

    protected void btnTest_Click(object sender, EventArgs e)
    {
        lblMsg.Text = "Success....";
    }

    protected void txtName_TextChanged(object sender, EventArgs e)
    {
        txtName.Text = "Nadeem Qusroo";

    }

kalpesh

0 8

Reply
ANSWER
User: kalpesh
Replied: on Feb 06, 2018 12:44 AM
Modified: on Feb 06, 2018 12:45 AM
Report

Just place you script code at the end of Update panel. Refer the below changed code and try it will work fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="Scr">
        </asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="upl">
            <contenttemplate>
         <div id="main-content">
                 <ul class="nav nav-pills" id="myTab" role="tablist">
                     <li class="nav-item">
                         <a class="nav-link active" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="information" aria-selected="true">Asset Details</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" id="employee-tab" data-toggle="tab" href="#employee" role="tab" aria-controls="employee" aria-selected="false">Employee Information</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" id="documents-tab" data-toggle="tab" href="#documents" role="tab" aria-controls="documents" aria-selected="false">Related Documents</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" id="transfer-tab" data-toggle="tab" href="#transfer" role="tab" aria-controls="transfer" aria-selected="false">Transfer History</a>
                     </li>
                 </ul>
                 <div class="tab-content" id="myTabContent">
                     <div class="tab-pane fade show active" id="information" role="tabpanel" aria-labelledby="information-tab">
                         Tab-1 content
                       
                     </div>
                     <div class="tab-pane fade" id="employee" role="tabpanel" aria-labelledby="employee-tab">
                         <h4 class="mb-3">Employee Details</h4>
                         <div class="row">
  
                             <div class="col-md-3 mb-3">
                                 <label for="txtEmpId">Employee Id<span class="text-muted">(Required)</label>
                                 <asp:RequiredFieldValidator runat="server" ID="rfv7" ControlToValidate="txtEmpId" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                 </asp:RequiredFieldValidator>
                                 <asp:TextBox runat="server" ID="txtEmpId" CssClass="form-control" AutoPostBack="true"  MaxLength="6"></asp:TextBox>
  
                             </div>
                             <div class="col-md-6 mb-3">
                                 <label for="txtName">Name<span class="text-muted">&nbsp;(Full name & other details will be automatically fetched based on EmpId)</span></label>
                                 <asp:TextBox runat="server" ID="txtName" CssClass="form-control" ReadOnly="true" OnTextChanged="txtName_TextChanged"></asp:TextBox>
                             </div>
                         </div>
                         <div class="row">
                             <div class="col-md-4 mb-3">
                                 <label for="ddlDepartment">Company Code</label>
                                 <asp:RequiredFieldValidator runat="server" ID="rfv3" ControlToValidate="ddlCompany" InitialValue="0" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                 </asp:RequiredFieldValidator>
                                 <asp:DropDownList runat="server" ID="ddlCompany" CssClass="form-control" AppendDataBoundItems="true">
                                     <asp:ListItem Text="Please select" Value="0" Selected="True"></asp:ListItem>
                                 </asp:DropDownList>
                             </div>
                             <div class="col-md-4 mb-3">
                                 <label for="ddlDepartment">Department</label>
                                 <asp:RequiredFieldValidator runat="server" ID="rfv8" InitialValue="0" ControlToValidate="ddlDepartment" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                 </asp:RequiredFieldValidator>
                                 <asp:DropDownList runat="server" ID="ddlDepartment" AppendDataBoundItems="true" CssClass="form-control">
                                     <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                                 </asp:DropDownList>
                             </div>
                             <div class="col-md-4 mb-3">
                                 <label for="ddlLocation">Location</label>
                                 <asp:RequiredFieldValidator runat="server" ID="rfv9" InitialValue="0" ControlToValidate="ddlLocation" ErrorMessage="*" ForeColor="Red" Display="Dynamic" Font-Bold="true" SetFocusOnError="true">
                                 </asp:RequiredFieldValidator>
                                 <asp:DropDownList runat="server" ID="ddlLocation" AppendDataBoundItems="true" CssClass="form-control">
                                     <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                                 </asp:DropDownList>
  
                             </div>
  
                         </div>
                     </div>
                     <div class="tab-pane fade" id="documents" role="tabpanel" aria-labelledby="documents-tab">
                         Tab Content-3
                     </div>
                     <div class="tab-pane fade" id="transfer" role="tabpanel" aria-labelledby="transfer-tab">
                         <asp:Label runat="server" ID="lblMsg"></asp:Label>
                       <asp:Button runat="server" ID="btnTest" Text="Test" OnClick="btnTest_Click" CssClass="btn btn-primary" CausesValidation="false" />
                     </div>
                 </div>
             </div>
             <asp:HiddenField ID="TabName" runat="server" />  
         </contenttemplate>
        </asp:UpdatePanel>
        <script type="text/javascript">
            $(function () {
                SetTabs();
            });
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (prm != null) {
                prm.add_endRequest(function (sender, e) {
                    if (sender._postBackSettings.panelsToUpdate != null) {
                        SetTabs();
                    }
                });
            };
            function SetTabs() {
                var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "information";
                $('#main-content a[href="#' + tabName + '"]').tab('show');
                $("#main-content a").click(function () {
                    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
                });
            };
        </script>
    </div>
    </form>
</body>
</html>

Screenshot

Bootstrap Tabs Maintain Selected (Active) Tab on PostBack inside ASP.Net UpdatePanel using jQuery

Company

Explore

Follow us

Contact Us