【jqGrid for ASP.NET MVC Documentation】.学习笔记.2.jqGrid Model-View-Controller 分离

最新推荐文章于 2021-06-11 14:10:12 发布

weixin_30568715

最新推荐文章于 2021-06-11 14:10:12 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/msdynax/p/3269657.html

版权

1 基本

分离代码和描述，在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 等。

2 创建Model 演练

一个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;            
        }
        
    }
}

3 创建 View 演练

要创建一个新的 grid View ，只需要在 Views文件夹上右键，选择添加新 View。你也可以将它放置在子文件夹中。在本例中，我们将其放置在 View/Grid 中，将其命名为 PerformanceLinq 。

选中创建强类型的View，和刚刚创建的Model类。这样我们就能引用 Model ，并将它作为参数传递给 View HtmlHelper。

首先，我们需要引入 jqGrid 的命名空间

<%@ Import Namespace="JQGridMVCExamples.Models" %>

然后添加外部grid 脚本和css 依赖。

1 < head id ="Head1" runat ="server" > 2 < title > Performance Linq </ title > 3 < script type ="text/javascript" src ="Scripts/jquery-1.3.2.min.js" ></ script > 4 < script type ="text/javascript" src ="Scripts/jqgrid/i18n/grid.locale-en.js" ></ script > 5 < script type ="text/javascript" src ="Scripts/jqgrid/jquery.jqGrid.min.js" ></ script > 6 < link rel ="stylesheet" type ="text/css" href ="Content/themes/redmond/jquery-ui-1.7.1.custom.css" /> 7 < link rel ="stylesheet" type ="text/css" href ="Content/themes/ui.jqgrid.css" /> 8 </ head >

最后使用 jqGrid HtmlHelper ，将grid 放置在页面上我们需要的位置。HtmlHelper 会以引用的方式获得 Model ，并使用它，基于它渲染gird（你依然能在Controller 中改变 Model 的默认项）。HtmlHelper 的第一个参数是 Model (从强类型 View 传递来)，第二个参数是 grid 的 ID 。

1 <% = Html.Trirand().JQGrid(Model.OrdersGrid, " JQGrid1 " ) %>

最后，页面看起来像这样

1 <% @ Page Language = " C# " Inherits = " System.Web.Mvc.ViewPage<JQGridMVCExamples.Models.OrdersJqGridModel> " %> 2 <% @ Import Namespace = " Trirand.Web.Mvc " %> 3 <% @ Import Namespace = " JQGridMVCExamples.Models " %> 4 5 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 6 7 < html xmlns ="http://www.w3.org/1999/xhtml" > 8 < head id ="Head1" runat ="server" > 9 < title > Performance Linq </ title > 10 < script type ="text/javascript" src ="Scripts/jquery-1.3.2.min.js" ></ script > 11 < script type ="text/javascript" src ="Scripts/jqgrid/i18n/grid.locale-en.js" ></ script > 12 < script type ="text/javascript" src ="Scripts/jqgrid/jquery.jqGrid.min.js" ></ script > 13 < link rel ="stylesheet" type ="text/css" href ="Content/themes/redmond/jquery-ui-1.7.1.custom.css" /> 14 < link rel ="stylesheet" type ="text/css" href ="Content/themes/ui.jqgrid.css" /> 15 </ head > 16 < body > 17 < div > 18 <% = Html.Trirand().JQGrid(Model.OrdersGrid, " JQGrid1 " ) %> 19 </ div > 20 < br />< br /> 21 < div > 22 <% Html.RenderPartial( " CodeTabs " ); %> 23 </ div > 24 25 </ body > 26 </ html >

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

转载于:https://www.cnblogs.com/msdynax/p/3269657.html