分离代码 和 描述 ,在ASP.NET MVC 应用程序中是非常重要的。因此,jqGrid 的 mvc 模式使用一个共同的网格安装设置,包括 Model ,Controller 和 View。
Model,它需要位于你mvc的文件夹中。
View,显示gird在你昂站的布局。你可以在你的View(强类型 View)中引用 grid Model,并把它作为一个参数,传给 View HtmlHelper 。这会使 gird 基于 Model。
Controller,你可以使用 Controller 来定制 Model(改变一些 Model 设置)和 grid 交互,包括分页,排序,编辑等事件将被作为 Actions 传递给 Controller,你可以写自定义的逻辑,更新db 等。
一个jqGrid Model 的一般安装。它需要放在 Model 文件夹中。创建一个新的 gird model ,只需在Models文件夹上点右键,选择添加新 Class 。你也可以将其放在子文件夹中。在本例中,我们将它放置在 Model/Grid 文件夹中,创建名为 OrdersJqGridModel.cs 的Model class 。
一旦我们设置好 OrdersJqGridModel.cs 文件,我们就能创建一个 grid 实例。
在此之前需要引用 Trirand.Web.Mvc.dll 和 Trirand.Web.Mvc。
jqGrid model 的类型是 JQGrid。
你只需要做的唯一的事情,就是明确定义 columns。
所有的 Model 设置,都能在 Controller 中被覆盖,包括 添加,移除,改变列属性,改变 grid 属性等。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Trirand.Web.Mvc; using System.Web.UI.WebControls; namespace JQGridMVCExamples.Models { public class OrdersJqGridModel { public JQGrid OrdersGrid { get; set; } public OrdersJqGridModel() { OrdersGrid = new JQGrid { Columns = new List<JQGridColumn>() { new JQGridColumn { DataField = "OrderID", // always set PrimaryKey for Add,Edit,Delete operations // if not set, the first column will be assumed as primary key PrimaryKey = true, Editable = false, Width = 50 }, new JQGridColumn { DataField = "OrderDate", Editable = true, Width = 100, DataFormatString = "{0:d}" }, new JQGridColumn { DataField = "CustomerID", Editable = true, Width = 100 }, new JQGridColumn { DataField = "Freight", Editable = true, Width = 75 }, new JQGridColumn { DataField = "ShipName", Editable = true } }, Width = Unit.Pixel(640), Height = Unit.Percentage(100) }; OrdersGrid.ToolBarSettings.ShowRefreshButton = true; } } }
要创建一个新的 grid View ,只需要在 Views文件夹上右键,选择 添加新 View。你也可以将它放置在子文件夹中。在本例中,我们将其放置在 View/Grid 中,将其命名为 PerformanceLinq 。
选中 创建强类型的View,和刚刚创建的Model类。这样我们就能引用 Model ,并将它作为参数传递给 View HtmlHelper。
首先,我们需要引入 jqGrid 的命名空间
<%@ Import Namespace="JQGridMVCExamples.Models" %>
然后添加外部grid 脚本和css 依赖。
最后使用 jqGrid HtmlHelper ,将grid 放置在页面上我们需要的位置。HtmlHelper 会以引用的方式获得 Model ,并使用它,基于它渲染gird(你依然能在Controller 中改变 Model 的默认项)。HtmlHelper 的第一个参数是 Model (从强类型 View 传递来),第二个参数是 grid 的 ID 。
最后,页面看起来像这样
在 Controller/Grid 文件夹下新建 PerformanceLinqController 。
有至少两个Action 需要为 grid 定义。setup action,它用来设置 Model。data requested action,grid从客户端发来数据,告诉服务端代码需要执行的数据绑定。
这里有一个完整的Controller,包含所有的 action。
PerformanceLinq action 是用来设置grid 的 action。这里你能得到jqGrid Model 的引用,并改变一些设置。如果没有设置被改变,那么默认的设置回被使用。
DataUrl 需要设置 Action,它关心 DataRequested 加载数据
DataRequested Action 需要返回 JsonResult 。
NorthWind Model 是一个 Linq-To-Sql 的例子。我们使用了它的 Orders table。
你需要调用 DataBind ,并将 Model 作为参数传递给它。
这样 jqGrid会自动处理任何事情,包括分页,排序,搜索 等等。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using JQGridMVCExamples.Models; using System.Web.UI.WebControls; namespace JQGridMVCExamples.Controllers.Grid { public partial class GridController : Controller { // This is the default action for the View. Use it to setup your grid Model. public ActionResult PerformanceLinq() { // Get the model (setup) of the grid defined in the /Models folder. var gridModel = new OrdersJqGridModel(); // Customize/change some of the default settings for this model // ID is a mandatory field. Must by unique if you have several grids on one page. gridModel.OrdersGrid.ID = "OrdersGrid"; // Setting the DataUrl to an action (method) in the controller is required. // This action will return the data needed by the grid gridModel.OrdersGrid.DataUrl = Url.Action("DataRequested"); // Pass the custmomized grid model to the View return View(gridModel); } // This method is called when the grid requests data. You can choose any method to call // by setting the JQGrid.DataUrl property public JsonResult DataRequested() { // Get both the grid Model and the data Model // The data model in our case is an autogenerated linq2sql database based on Northwind. var gridModel = new OrdersJqGridModel(); var northWindModel = new NorthwindDataContext(); // return the result of the DataBind method, passing the datasource as a parameter // jqGrid for ASP.NET MVC automatically takes care of paging, sorting, filtering/searching, etc return gridModel.OrdersGrid.DataBind(northWindModel.Orders); } } }