jQuery Grid With ASP.Net MVC

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