Node is saved as draft in My Content >> Draft
-
Jquery Grid in MVC
over 8 years ago
While display bulk of data in MVC we use lot of things for it.
One way is to display it using the table but in this case we dont have the basic functionality like paging sorting and if we want to edit it in the same view we are in then it will be of no use .
For doing this we will use the Jquery Grid which will make things easier for the programmer.
This is the library file for the Jquery grid that we will use for implemetation.
Just create a basic MVC project and after doing that in the default Home controller we will create a view.
@{ 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 Add() { $("#playerId").val(""); $("#name").val(""); $("#txtMiddleName").val(""); $("#txtLastName").val(""); $("#playerModal").modal("show"); } function Edit(e) { $("#EmpId").val(e.data.record.EmpId); $("#txtFirstName").val(e.data.record.FirstName); $("#txtMiddleName").val(e.data.record.MiddleName); $("#txtLastName").val(e.data.record.LastName); $("#playerModal").modal("show"); } 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>This view contains all the functionalities of the grid.
Then we will create corresponding action for these operations.
public ActionResult Index() { return View(); } [HttpGet] public JsonResult GetPlayers(int? page, int? limit, string sortBy, string direction, string searchString = null) { int total; var records = new GridModel().GetPlayers(page, limit, sortBy, direction, searchString, out total); return Json(new { records, total }, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult Save(EmployeeModel EmpMod) { new GridModel().Save(EmpMod); return Json(true); } [HttpPost] public JsonResult Remove(int id) { new GridModel().Remove(id); return Json(true); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); }
0 Comment(s)