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);      }    }

项目主页：http://www.open-open.com/lib/view/home/1430832881320

jQuery Grid With ASP.Net MVC