Making Admin Panel in Online Quiz Application Asp.net MVC C#

Click here to download the source code

Loading Progress Bar in asp.net mvc using ajax,jquery and Bootstrap Modal

@model WebApplication28.Models.tbl_employee

@{

    ViewBag.Title = "Home Page";

}



<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

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



<style>

    td{

        padding:10px;

    }

</style>

<div class="container">

    <br />

    <a href="#" class="btn btn-block btn-success" data-toggle="modal" data-target="#myModal">Add a new Record</a>



    <div class="modal fade" id="myModal">

        <div class="modal-dialog">

            <div class="modal-content">



                <div class="modal-header">

                    <a href="#" class="close" data-dismiss="modal">&times;</a>

                    <h3 class="modal-title">Add a new Record! </h3>



                </div>



                <div class="modal-body">



                    <form id="myForm">



                        <table >

                            <tr>

                                <td>Name: </td>

                                <td>@Html.TextBoxFor(x => x.emp_name, new {@class="form-control" }) </td>

                            </tr>



                            <tr>

                                <td>Contact: </td>

                                <td>@Html.TextBoxFor(x => x.emp_contact, new { @class = "form-control" }) </td>

                            </tr>





                        </table>







                        </form>



                    <div style="text-align:center;display:none" id="loaderDiv">

                        <img src="~/Content/img/tenor.gif" />



                    </div>



                    </div>









                <div class="modal-footer">



                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>

                    <input type="reset" value="Submit" class="btn btn-success" id="btnSubmit" />



                </div>



            </div>



        </div>

    </div>

</div>







<script>



    $(document).ready(function () {





        $("#btnSubmit").click(function () {



            $("#loaderDiv").show();



            var myformdata = $("#myForm").serialize();



            $.ajax({



                type: "POST",

                url: "/Home/Index",

                data: myformdata,

                success: function ()

                {

                    $("#loaderDiv").hide();

                    $("#myModal").modal("hide");



                }



            })

        })



    })





</script>