Maintain Selected (Active) Bootstrap Tab on Partial PostBack inside UpdatePanel using Bootstrap 4 in ASP.Net

Last Reply one year ago By pandeyism

Posted one year ago


With reference to below link


I also tried the same but after every postback in tab controls it always navigate to first tab then active tab.

Even page have only blank tabs (No database attached).

Please assist in Bootstrap 4.

Thanx in Advance.

You are viewing reply posted by: pandeyism one year ago.
Posted one year ago

Hi Waghmare,

Please refer below sample.


<html xmlns="">
<head runat="server">
    <link type="text/css" rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
                <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
                        <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
                    <!-- 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 role="tabpanel" class="tab-pane" id="employment">
                            This is Employment Information Tab
                <br />
                <br />
                <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
                <asp:HiddenField ID="TabName" runat="server" />
    <script type="text/javascript">
        $(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
        function SetTabs() {
            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("#", ""));



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


Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Me.IsPostBack Then
        TabName.Value = Request.Form(TabName.UniqueID)
    End If
End Sub