Node is saved as draft in My Content >> Draft
-
Binding Jquery Grid Dynamically in MVC
over 8 years ago
In MVC while making bindings with the data into the collective form as in the table usually with the JQuery functionality is easy to use.
First you will download and include the CSS and scripts for it
The files related to the Grid you need to include in your project.
Then after doing it you need to create a model class for the grid.
DataClasses1DataContext DataContextObj = new DataClasses1DataContext(); public List<EmployeeModel> GetPlayers(int? page, int? limit, string sortBy, string direction, string searchString, out int total) { total = (from u in DataContextObj.EmployeeDetails select u).Count(); var records = (from p in DataContextObj.EmployeeDetails select new EmployeeModel { EmpId = p.EmpId, FirstName = p.EmpFirstName, MiddleName = p.EmpMiddleName, LastName = p.EmpLastName }).AsQueryable(); if (!string.IsNullOrWhiteSpace(searchString)) { records = records.Where(p => p.FirstName.Contains(searchString) || p.LastName.Contains(searchString)); } if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction)) { if (direction.Trim().ToLower() == "asc") { records = SortHelper.OrderBy(records, sortBy); } else { records = SortHelper.OrderByDescending(records, sortBy); } } if (page.HasValue && limit.HasValue) { int start = (page.Value - 1) * limit.Value; records = records.Skip(start).Take(limit.Value); } return records.ToList(); }Then after this we will create the action for calling this method.
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); }And we will create a view that will call the method for binding the grid.
<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>Then at last the grid will be binded finally to the data we fetch through the LINQ query .
0 Comment(s)