如何将我的视图模型绑定到jqGrid？

Question

使用MVC2和EF框架.到目前为止,我发现的大多数参考/博客文章都涉及将单个表及其数据(有时是分层的)绑定到具有编辑功能的jqGrid.我不需要这个.我甚至不需要编辑数据 - 只需显示.我需要显示和分页数据.排序是一个加号,我猜想搜索奖金.

jqGrid的文档显示了绑定的数据源,如下所示:

return gridModel.OrdersGrid.DataBind(northWindModel.Orders);

但是,我只有我的实体上下文而没有对视图模型的引用.我可以在这里创建一个实体集吗？对此不太熟悉.

我的所有视图模型都包含来自几个不同表的数据.如何将视图模型属性绑定到jqGrid？我玩Trirand的jqGrid的的30天试用版的MVC.同样,我只需要显示和分页数据,但我不确定如何将视图模型连接到jqGrid数据源.

编辑

public ActionResult test()
    {
        var gridModel = new testmodel();
        var viewModel = gridModel.testgrid;
        SetupTestGrid(viewModel);
        return View(gridModel);
    }

    private void SetupTestGrid(JQGrid viewModel)
    {
        viewModel.ID = "TestGrid";
        viewModel.DataUrl = Url.Action("SearchTestGridDataRequested");
        viewModel.ToolBarSettings.ShowEditButton = false;
        viewModel.ToolBarSettings.ShowAddButton = false;
        viewModel.ToolBarSettings.ShowDeleteButton = false;
    }

    public JsonResult SearchTestGridDataRequested(string sidx, string sord, int page, int rows)
    {
        var gridModel = new testmodel(sidx, sord, page, rows);
        SetupTestGrid(gridModel.testgrid);
        return Json(gridModel.datasource);
    }

在testmodel和testmodel(参数)中,我创建了一个包含Phil Haack参数的匿名类型(名为datasource); 总计,页面,记录和行.在SearchTestGridDataRequested的最后一个语句中,此属性是JSON'ified.

Answer 1

我真的不知道jqGrid的商业版本,但产品在内部使用Open Source jqGrid,所以我可以解释它应该如何与ASP.NET MVC一起工作.

通常,在MVC中使用jqGrid,您可以拥有一个包含两个元素的页面(一个View)<table>和一个<div>用于寻呼机的页面.两者(<table>和<div>)必须具有id属性.不需要其他复杂的View绑定到Model.

现在您可以在页面的页眉中加载所需的所有JavaScripts:jQuery,jqGrid和您页面特定的JavaScript,它们定义了您要显示的jqGrid,例如列模型和不同的jqGrid参数.将网格绑定到数据所需的最重要参数是url参数.例如,如果您在Home控制器中定义了操作,GetData则url可以是"Home/GetData"或'<%= Url.Content("~/Home/GetData")%>'.这足以具有"数据绑定".不需要使用模型数据.

该行动GetData可以定义如下:

JsonResult GetData(string sidx, string sord, int page, int rows)

如果您只想支持数据排序和分页,但不需要任何搜索(过滤)支持.

如果是搜索支持,则需要添加其他参数.如果你想使用高级搜索或工具栏搜索与stringResult:true参数,你应该添加一个额外的参数string filter:

JsonResult GetData (string sidx, string sord, int page, int rows, string filter)

如果在网格中实现单字段搜索,它应该是

JsonResult GetData (string sidx, string sord, int page, int rows,
                    string searchField, string searchString, string searchOper)

你也可以做一个普遍的行动:

JsonResult GetData (string sidx, string sord, int page, int rows, string _search
                    string searchField, string searchString, string searchOper,
                    string filter)

因此,在所有情况下,您必须执行几乎相同的操作,但您将以其他一些形式接收其他参数.

现在,您应该决定使用哪种形式从控制器操作为jqGrid提供数据.jqGrid非常灵活,您可以以标准格式获取数据

{ 
  "total": "xxx",   // the total number of pages
  "page": "yyy",    // the current page number of the data returned
  "records": "zzz", // the total number of records
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", ...,  "cell1n"]},
    {"id" :"2", "cell":["cell21", "cell22", ..., "cell2n"]},
      ...
  ]
}

或者以另一种(更易读,但更长)的格式.在最后一种情况下,您将不得不定义一个小参数jsonReader来描述如何读取数据(参见文档).

如果你看一些老的回答像里面这个,这个,这个和这个,你会发现完整的工作MVC项目的足够的代码片段,你可以为你的建议修改.列表中的第一个参考应该给出了关于如何从EF源或任何其他IQueryable<T>来源准备jqGrid所需数据的主要问题的答案.

在另一个我的旧答案中,我描述了一般架构如何在MVC环境中使用jqGrid更详细,但对于那些已经测试过不同实现方式的人来说.