【jqGrid for ASP.NET MVC Documentation】.学习笔记.2.jqGrid Model-View-Controller 分离
1 基本
分离代码 和 描述 ，在ASP.NET MVC 应用程序中是很是重要的。所以，jqGrid 的 mvc 模式使用一个共同的网格安装设置，包括 Model ,Controller 和 View。javascript
Model，它须要位于你mvc的文件夹中。css
View，显示gird在你昂站的布局。你能够在你的View（强类型 View）中引用 grid Model，并把它做为一个参数，传给 View HtmlHelper 。这会使 gird 基于 Model。html
Controller，你可使用 Controller 来定制 Model（改变一些 Model 设置）和 grid 交互，包括分页，排序，编辑等事件将被做为 Actions 传递给 Controller，你能够写自定义的逻辑，更新db 等。java
2 建立Model 演练
一个jqGrid Model 的通常安装。它须要放在 Model 文件夹中。建立一个新的 gird model ，只需在Models文件夹上点右键，选择添加新 Class 。你也能够将其放在子文件夹中。在本例中，咱们将它放置在 Model/Grid 文件夹中，建立名为 OrdersJqGridModel.cs 的Model class 。jquery
一旦咱们设置好 OrdersJqGridModel.cs 文件，咱们就能建立一个 grid 实例。sql
在此以前须要引用 Trirand.Web.Mvc.dll 和 Trirand.Web.Mvc。mvc
jqGrid model 的类型是 JQGrid。布局
你只须要作的惟一的事情，就是明肯定义 columns。ui
全部的 Model 设置，都能在 Controller 中被覆盖，包括 添加，移除，改变列属性，改变 grid 属性等。this
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;
}
}
}
3 建立 View 演练
要建立一个新的 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 。
最后，页面看起来像这样
4 建立 Controller 演练
在 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);
}
}
}
- 1. ASP.NET MVC and jqGrid 学习笔记 5-添加数据
- 2. jqGrid学习笔记（一）
- 3. jqGrid学习
- 4. Jqgrid学习
- 5. Asp.Net MVC中使用ACE模板之Jqgrid
- 6. 【ASP.NET MVC系列】浅谈jqGrid 在ASP.NET MVC中增删改查
- 7. jqGrid jqGrid分页参数+条件查询
- 8. jqGrid
- 9. ASP.NET Core 2 学习笔记（十）视图 ASP.NET Core 2 学习笔记（六）MVC ASP.NET Core 2 学习笔记（四）依赖注入 ASP.NET Core 2 学习笔记（六）
- 10. ASP.NET Core 2 学习笔记（六）MVC
- 更多相关文章...
- • SQLite 分离数据库 - SQLite教程
- • ASP.NET Razor - 标记 - ASP.NET 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. ASP.NET MVC and jqGrid 学习笔记 5-添加数据
- 2. jqGrid学习笔记（一）
- 3. jqGrid学习
- 4. Jqgrid学习
- 5. Asp.Net MVC中使用ACE模板之Jqgrid
- 6. 【ASP.NET MVC系列】浅谈jqGrid 在ASP.NET MVC中增删改查
- 7. jqGrid jqGrid分页参数+条件查询
- 8. jqGrid
- 9. ASP.NET Core 2 学习笔记（十）视图 ASP.NET Core 2 学习笔记（六）MVC ASP.NET Core 2 学习笔记（四）依赖注入 ASP.NET Core 2 学习笔记（六）
- 10. ASP.NET Core 2 学习笔记（六）MVC