Bootstrap Tabs control implementation in aspx page

Saravanan Np

7y7.2k.NET

How to implement multiple bootstrap tabs control in single web aspx page? in that once click the button save data will save on the DB then page will go for tabs 2? how do i do this? people can explain please....

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Saravanan Np7y ago
Hi Salman,

am trying for the same. but not get it rightly. if you have any idea please welcome

Thank you.
Salman Beg7y ago
Hi.
You can try like this,
<form id="form1" runat="server">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#personal">Personal Informationa>li>
            <li><a data-toggle="tab" href="#professional">Professional Informationa>li>
            <li><a data-toggle="tab" href="#accountinformation">User Account Infromationa>li>
        ul>
        <div class="tab-content">
            <div id="personal" class="tab-pane fade in active">

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-4">
                                <span class="Star-clr">*span>First Name :
                            div>
                            <div class="col-sm-8">
                                <asp:TextBox ID="txtName" runat="server" placeholder="First Name">asp:TextBox>
                            div>
                        div>
                    div>
                div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <div class="col-sm-2">
                            div>
                            <div class="col-sm-10" style="float: right">
                                <asp:Button ID="btnNext" Width="150" runat="server"  Text="NEXT" />
                            div>
                        div>
                    div>
                div>

            div>
            <div id="professional" class="tab-pane fade">

            div>
            <div id="accountinformation" class="tab-pane fade">
            div>

            <input type="button" value="Next" onclick="ShowNextTab();" />
            <input type="button" value="Prev" onclick="ShowPrevTab();" />
        div>
    div>
form>
Javascript code looks like this,
function ShowNextTab() {
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
    }
    function ShowPrevTab() {
        $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    }
and for Saving of data you can use ajax call.
Thanks.
Saravanan Np7y ago
Hi
Jignesh Kumar,

Html Control is taking as well. but asp control will give and implement like this not working.

var currentTab = 0;
$(function () {
$("#<%=tabs.ClientID%>").tabs({
select: function (e, i) {
currentTab = i.index;
}
});
});
$("#<%=btnNext.ClientID%>").live("click", function () {
var tabs = $("#<%=tabs.ClientID%>").tabs();
var c = $("#<%=tabs.ClientID%>").tabs("length");
currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
tabs.tabs("select", currentTab);
$("#<%=btnPrevious.ClientID%>").show();
if (currentTab == (c - 1)) {
$("#<%=btnNext.ClientID%>").hide();
} else {
$("#<%=btnNext.ClientID%>").show();
}
});
$("#<%=btnPrevious.ClientID%>").live("click", function () {
var tabs = $("#<%=tabs.ClientID%>").tabs();
var c = $("#<%=tabs.ClientID%>").tabs("length");
currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
tabs.tabs("select", currentTab);
if (currentTab == 0) {
$("#<%=btnNext.ClientID%>").show();
$("#<%=btnPrevious.ClientID%>").hide();
}
if (currentTab < (c - 1)) {
$("#<%=btnNext.ClientID%>").show();
}
});

Can you give some idea?
Jignesh Kumar7y ago
Please try below link will do button click change.

https://www.aspsnippets.com/Articles/jQuery-UI-Tabs-Navigation-using-Next-Previous-Buttons.aspx
Saravanan Np7y ago
Hi Jignesh,

below the link fine. the same link once click the submit button then page go for tab 2 employee. how to do that?

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

Please try below link,

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

https://www.aspsnippets.com/Articles/Simple-Bootstrap-Tabs-example.aspx
Salman Beg7y ago
Hi. You can follow this link and after that you need to change little bit of code as per your need, https://stackoverflow.com/questions/37959511/how-to-make-a-tab-control-with-bootstrap-in-asp-net . Thanks.

Bootstrap Tabs control implementation in aspx page

Jignesh Kumar,