MVC Twitter Bootstrap Wizard : Problem with Next, Previous buttons

[Sumeet2490]

I'm referring the example given here - http://vinceg.github.io/twitter-bootstrap-wizard/examples/basic-progressbar.html.

I'm developing using ASP>NET MVC 5. The "Previous" and "Next" button do not work at all

What is it that I'm doing wrong? Any suggestions from experts? Thanks in advance.

PS: I'm very new to Javascript.

@model WebApp.Models.Wizard.Step1

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <div id="rootwizard">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul class="nav nav-tabs pager wizard" role="tablist">
                            <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">First</a></li>
                            <li role="presentation"><a href="#tab2" data-toggle="tab">Second</a></li>
                            <li role="presentation"><a href="#tab3" data-toggle="tab">Third</a></li>
                            <li role="presentation"><a href="#tab4" data-toggle="tab">Fourth</a></li>
                            <li role="presentation"><a href="#tab5" data-toggle="tab">Fifth</a></li>
                            <li role="presentation"><a href="#tab6" data-toggle="tab">Sixth</a></li>
                            <li role="presentation"><a href="#tab7" data-toggle="tab">Seventh</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="bar" class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
            </div>
            <div class="tab-content">
                <div class="tab-pane" id="tab1">
                    1
                </div>
                <div class="tab-pane" id="tab2">
                    2
                </div>
                <div class="tab-pane" id="tab3">
                    3
                </div>
                <div class="tab-pane" id="tab4">
                    4
                </div>
                <div class="tab-pane" id="tab5">
                    5
                </div>
                <div class="tab-pane" id="tab6">
                    6
                </div>
                <div class="tab-pane" id="tab7">
                    7
                </div>
                <ul class="pager wizard">
                    <li class="previous first" style="display:none;"><a href="#">First</a></li>
                    <li class="previous"><a href="#">Previous</a></li>
                    <li class="next last" style="display:none;"><a href="#">Last</a></li>
                    <li class="next"><a href="#">Next</a></li>
                </ul>
            </div>
        </div> <!-- rootwizard div end -->
    </div> <!-- form-horizontal div end -->
}

<script src="~/Scripts/jquery.bootstrap.wizard.js"></script>
<script src="~/Scripts/jquery.bootstrap.wizard.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#rootwizard').bootstrapWizard({
            onTabShow: function (tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index + 1;
                var $percent = ($current / $total) * 100;
                $('#rootwizard .progress-bar').css({ width: $percent + '%' });
            }
        });
    });

</script>