Delete Data In ASP.NET MVC using AJAX and POP UP MODAL

CONTROLLER CODE

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using WebApplication30.Models;

namespace WebApplication30.Controllers

{

    public class HomeController : Controller

    {

        dbsalmanEntities db = new dbsalmanEntities();

        public ActionResult Index()

        {

            return View(db.tbl_student.Where(x=>x.std_isactive==true).ToList());

        }

        public JsonResult DeleteEmployee(int EmployeeId)

        {

            bool result = false;

            tbl_student s = db.tbl_student.Where(x => x.std_id == EmployeeId).SingleOrDefault();

            if (s!=null)

            {

                s.std_isactive = false;

                db.SaveChanges();

                result = true;

            }

            return Json(result, JsonRequestBehavior.AllowGet);

        }

        //

        public ActionResult About()

        {

            ViewBag.Message = "Your application description page.";

            return View();

        }

        public ActionResult Contact()

        {

            ViewBag.Message = "Your contact page.";

            return View();

        }

    }

}

Index.cshtml CODE:

@model IEnumerable<WebApplication30.Models.tbl_student>

@{

    ViewBag.Title = "Index";

}

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

<h2>Delete Data</h2>

<div class="" style="width:40%;margin-top:2%">

    <table class="table table-responsive">

        <thead>

            <tr>

                <th>ID</th>

                <th>NAME</th>

                <th>ADMISSION DATE</th>

            </tr>

        </thead>

        <tbody>

            @foreach (var item in Model)

            {

                <tr id="row_@item.std_id">

                    <td>@item.std_id</td>

                    <td>@item.std_name</td>

                    <td>@item.std_admissiondate</td>

                    <td><a class="btn btn-danger" onclick="ConfirmDelete(@item.std_id)">Delete <i class="glyphicon-trash"></i>  </a></td>

                </tr>

            }

        </tbody>

    </table>

    <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">Delete Employee</h3>

                </div>

                <div class="modal-body">

                    <h4>Are you sure ? You want to delete this. </h4>

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

                        <img src="~/Content/img/2xkV.gif"  style="height:200px;width:200px"/>

                    </div>

                </div>

                <div class="modal-footer">

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

                    <a href="#" class="btn btn-success" onclick="DeleteEmployee()">Confirm</a>

                </div>

            </div>

        </div>

    </div>

    <input type="hidden" id="hiddenEmployeeId" />

</div>

<script>

    var ConfirmDelete = function (EmployeeId)

    {

        $("#hiddenEmployeeId").val(EmployeeId);

        $("#myModal").modal('show');

    }

    var DeleteEmployee = function ()

    {

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

        var empId = $("#hiddenEmployeeId").val();

        $.ajax({

            type: "POST",

            url: "/Home/DeleteEmployee",

            data: { EmployeeId: empId },

            success: function (result) {

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

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

                $("#row_" + empId).remove();

            }

        })

    }

</script>