While working on the MVC we have implemented the JQuery grid that is use for the Crude operations.

Then after this we will define a method from which the insertion and the updation is being done on the same method.

First we will made a method that will handle the updation and the insertion at once.

 public void Save(EmployeeModel EmpMod)
        {

            if (EmpMod.EmpId > 0)
            {

                EmployeeDetail empdet = new EmployeeDetail();
                empdet = DataContextObj.EmployeeDetails.Single(p => p.EmpId == EmpMod.EmpId);
                empdet.EmpFirstName = EmpMod.FirstName;
                empdet.EmpMiddleName = EmpMod.MiddleName;
                empdet.EmpLastName = EmpMod.LastName;
                DataContextObj.SubmitChanges();
            }

            else

            {
                EmployeeDetail empdet = new EmployeeDetail();
                empdet.EmpFirstName = EmpMod.FirstName;
                empdet.EmpMiddleName = EmpMod.MiddleName;
                empdet.EmpLastName = EmpMod.LastName;
                DataContextObj.EmployeeDetails.InsertOnSubmit(empdet);
                DataContextObj.SubmitChanges();

            }         
        }

We can invoke it by using the single controller action.

 [HttpPost]
        public JsonResult Save(EmployeeModel EmpMod)
        {
            new GridModel().Save(EmpMod);
            return Json(true);
        }

So we will invoke the same action in both the cases from our view.

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}



<script src="~/Scripts/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/grid-0.4.3.min.js" type="text/javascript"></script>

<script type="text/javascript">
    var grid;
    $(document).ready(function () {
        grid = $("#grid").grid({
            dataKey: "EmpId",
            uiLibrary: "bootstrap",
            columns: [
                { field: "EmpId", width: 50, sortable: true },
                { field: "FirstName", sortable: true },
                { field: "MiddleName", title: "Middle Name", sortable: true },
                { field: "LastName", title: "Last Name", sortable: true },
                { title: "", field: "Edit", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } },
                { title: "", field: "Delete", width: 34, type: "icon", icon: "glyphicon-remove", tooltip: "Delete", events: { "click": Remove } }
            ],
            pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
        });
        $("#btnAddPlayer").on("click", Add);
        $("#btnSave").on("click", Save);
        $("#btnSearch").on("click", Search);
    });

   
    function Save() {
        var EmployeeModel = {
            EmpId: $("#EmpId").val(),
            FirstName: $("#txtFirstName").val(),
            MiddleName: $("#txtMiddleName").val(),
            LastName: $("#txtLastName").val()
        };
        $.ajax({ url: "Home/Save", type: "POST", data: { EmpMod: EmployeeModel } })
            .done(function () {
                grid.reload();
                $("#playerModal").modal("hide");
            })
            .fail(function () {
                alert("Unable to save.");
                $("#playerModal").modal("hide");
            });
    }
    function Remove(e) {
        alert(e.data.id);
        $.ajax({ url: "Home/Remove", type: "POST", data: { id: e.data.id } })
            .done(function () {
                grid.reload();
            })
            .fail(function () {
                alert("Unable to remove.");
            });
    }
    function Search() {
        grid.reload({ searchString: $("#search").val() });
    }


</script>