jQuery Grid With ASP.Net MVC
bgn4
9年前
jQuery Grid 能够在 ASP.NET MVC 中轻松地实现分页、 排序、 筛选以及 jQuery 插件网格中的 CRUD 操作。
具有以下特征：
-
时尚的表格数据呈现控件。
-
JavaScript 控件用于表示和处理 web 上的表格数据。
-
可启用 Ajax。
-
可以与任何 ASP、 JavaServelets、 JSP、 PHP 等服务器端的技术集成。
-
与 ASP.NET 集成，很简单。
-
支持分页、JavaScript 和服务器端数据源。
-
支持 jQuery UI 和引导（Bootstrap）。
要使用网格插件，则将需要一个 HTML 表标记为网格的基本元素顺序。建议用表的"数据源"属性，作为服务器端的源 URL 的位置标识。
<table id="grid" data-source="@Url.Action("GetPlayers")"></table> 初始化表格作为网格中显示的字段：
grid = $("#grid").grid({ dataKey: "ID", uiLibrary: "bootstrap", columns: [ { field: "ID", width: 50, sortable: true }, { field: "Name", sortable: true }, { field: "PlaceOfBirth", title: "Place Of Birth", sortable: true }, { field: "DateOfBirth", title: "Date Of Birth", sortable: true }, { field: "Edit", title: "", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } }, { field: "Delete", title: "", width: 34, type: "icon", icon: "glyphicon- remove", tooltip: "Delete", events: { "click": Remove } } ], pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] } }); 简单的 CRUD 操作示例：
function Add() { $("#playerId").val(""); $("#name").val(""); $("#placeOfBirth").val(""); $("#dateOfBirth").val(""); $("#playerModal").modal("show"); } function Edit(e) { $("#playerId").val(e.data.id); $("#name").val(e.data.record.Name); $("#placeOfBirth").val(e.data.record.PlaceOfBirth); $("#dateOfBirth").val(e.data.record.DateOfBirth); $("#playerModal").modal("show"); } function Save() { var player = { ID: $("#playerId").val(), Name: $("#name").val(), PlaceOfBirth: $("#placeOfBirth").val(), DateOfBirth: $("#dateOfBirth").val() }; $.ajax({ url: "Home/Save", type: "POST", data: { player: player } }) .done(function () { grid.reload(); $("#playerModal").modal("hide"); }) .fail(function () { alert("Unable to save."); $("#playerModal").modal("hide"); }); } function Remove(e) { $.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() }); } 服务器端
在控制器中需要四种方法：索引、GetPlayers、保存和删除。
[NoCache] public class HomeController : Controller { 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(Player player) { new GridModel().Save(player); return Json(true); } [HttpPost] public JsonResult Remove(int id) { new GridModel().Remove(id); return Json(true); } }[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)] public sealed class NoCacheAttribute : ActionFilterAttribute { public override void OnResultExecuting(ResultExecutingContext filterContext) { filterContext.HttpContext.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1)); filterContext.HttpContext.Response.Cache.SetValidUntilExpires(false); filterContext.HttpContext.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache); filterContext.HttpContext.Response.Cache.SetNoStore(); base.OnResultExecuting(filterContext); } }