【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