ASP MVC Add record using bootstrap modal popup using Jquery Ajax

Simple example of using model popup submitting record to action using Ajax.
On click, modal is opened, which you can submit data or close it.

Sample output:

Simple Class:

public class EmployeeViewModel

    {

        public int Id { get; set; }

        public string Name { get; set; }

    }

Actions:

public class StudentController : Controller

    {

        // GET: Student

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(EmployeeViewModel emp)

        {

            return View();

        } 

    }

View:

@model MvcTechnoTips.Web.Models.ViewModel.EmployeeViewModel

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

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

<div class="container" style="margin-top:10px">

    <a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</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 Employee</h3>

                </div>

                <div class="modal-body">

                    <form id="myForm">

                        <div class="form-horizontal">

                            <h4>Employee</h4>

                            <hr />

                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                            <div class="form-group">

                                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

                                <div class="col-md-10">

                                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

                                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })

                                </div>

                            </div>                          

                        </div>

                    </form>

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

                        <img src="~/Content/InternetSlowdown_Day.gif" width="150" /> @* //put any image in content folder*@

                    </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:"/Student/Index",

                data: myformdata,

                success: function () {

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

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

                    //$('body').removeClass('modal-open');

                    $('.modal-backdrop').remove();

                },

                error: function () {

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

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

                    //$('body').removeClass('modal-open');

                    $('.modal-backdrop').remove();

                }

            })

        })

    })

</script>