In the JQuery grid several operations is been performed. So here we are going to discuss about the deletion operation in the MVC.
For doing this we need to use the libraries of the JQuery for the grid implementation.
After doing this , we will go to the deletion operation that is being performed in the grid . The model is quite simple and easy to understand.
public enum getstatus
{
success, failure
}
public class EmployeeModel
{
public int EmpId { get; set; }
[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }
public string MiddleName { get; set; }
[Required(ErrorMessage = "Last Name is required")]
public string LastName { get; set; }
[Required(ErrorMessage = "PhoneNo is required")]
public string PhoneNo { get; set; }
public string Address { get; set; }
public getstatus Status { get; set; }
public string msg { get; set; }
}
After this we create the class that fill contain the method for deleting the grid record.
public void Remove(int id)
{
var deletedproducts = from p in DataContextObj.EmployeeDetails
where p.EmpId == id
select p;
DataContextObj.EmployeeDetails.DeleteAllOnSubmit(deletedproducts);
DataContextObj.SubmitChanges();
}
Then we need to use the controller action for invoking this method from the view.
[HttpPost]
public JsonResult Remove(int id)
{
new GridModel().Remove(id);
return Json(true);
}
Then at last is our view from where the call is being made to the controller action.
@{
ViewBag.Title = "Home Page";
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employee Details</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="~/Content/grid-0.4.3.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container fill">
<h2>Employee Details</h2>
<br />
<div class="row">
<div class="col-md-3">
<div class="input-group">
<input type="text" id="search" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="button" id="btnSearch" class="btn btn-default">Go!</button>
</span>
</div>
</div>
<div class="col-md-9">
<button type="button" id="btnAddPlayer" class="btn btn-default pull-right">Add New Player</button>
</div>
</div>
<br />
<table id="grid" data-source="@Url.Action("GetPlayers")"></table>
</div>
<!-- Modal -->
<div class="modal fade" id="playerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Player</h4>
</div>
<div class="modal-body">
<form>
<input type="hidden" id="EmpId" />
<div class="form-group">
<label for="name">First Name</label>
<input type="text" class="form-control" id="txtFirstName" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="placeOfBirth">Middle Name</label>
<input type="text" class="form-control" id="txtMiddleName" placeholder="Enter Middle Name">
</div>
<div class="form-group">
<label for="dateOfBirth">Last Name</label>
<input type="text" class="form-control" id="txtLastName" placeholder="Enter Last Name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSave" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
<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 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>
0 Comment(s)