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

Last Reply 3 months ago By pandeyism

Posted 3 months ago

Hi,

With reference to below link

https://www.aspforums.net/Threads/879995/How-to-Maintain-Active-Bootstrap-Tab-inside-UpdatePanel-on-PostBack-using-jQuery/

 

https://www.aspforums.net/Threads/272636/Bootstrap-Tabs-Maintain-Selected-Active-Tab-on-Partial-PostBack-inside-AJAX-UpdatePanel-in-ASPNet/

 

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.

Posted 3 months ago

Hi Waghmare,

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <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
                        </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>
                <br />
                <br />
                <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
                <asp:HiddenField ID="TabName" runat="server" />
            </div>
        </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() : "personal";
            $('#Tabs a[href="#' + tabName + '"]').tab('show');
            $("#Tabs a").click(function () {
                $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
            });
        };
    </script>
    </form>
</body>
</html>

Code

C#

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

VB.Net

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

Shreenshot