CODEWITHSUNDEEP
c#tabcontrolbootstrapping
Neha Thakur
Neha Thakur

Reputation: 351

How to make a tab control with bootstrap in asp.net

Here I am implementing bootstrap tab control in asp.net application.

1) On click on next i want to go to next tab.

I want to make tab control working by clicking on tabs of tab control to go to next tab or by clicking on next button.

<form id="form1" runat="server">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
            <li><a data-toggle="tab" href="#professional">Professional Information</a></li>
            <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></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>
        </div>
    </div>
</form>

Image of Tab control:

Image of Tab control

Upvotes: 1

Views: 8552

Answers (1)

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14604

Create a button after your content divs and call function on this button

<input type="button" value="Next" onclick="ShowNextTab();" />

function ShowNextTab() {
  if ($('.nav-tabs > .active').next('li').length == 0) //If you want to select first tab when last tab is reached
        $('.nav-tabs > li').first().find('a').trigger('click');
    else
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
}

Below is a complete solution

HTML

<form id="form1" runat="server">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
            <li><a data-toggle="tab" href="#professional">Professional Information</a></li>
            <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></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>//close tag is missing

                            </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

function ShowNextTab() {
        $('.nav-tabs > .active').next('li').find('a').trigger('click');
    }
    function ShowPrevTab() {
        $('.nav-tabs > .active').prev('li').find('a').trigger('click');
    }

Upvotes: 1

Related Questions