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

时间:2010-11-12 21:50:29

标签: asp.net-mvc linq data-binding linq-to-entities jqgrid

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

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

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

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

我的所有视图模型都包含来自多个不同表的数据。如何将视图模型属性绑定到jqGrid?我正在玩Trirand针对MVC的jqGrid 30天试用版。同样,我只需要显示和分页数据,但我不确定如何将视图模型连接到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's个参数的匿名类型(名为datasource);总计,页面,记录和行。在SearchTestGridDataRequested的最后一个语句中,此属性是JSON'ified。

1 个答案:

答案 0 :(得分:8)

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

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

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

行动GetData可以定义如下:

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

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

如果是搜索支持,则需要添加其他参数。如果您要将Advanced SearchingToolbar SearchingstringResult:true参数一起使用,则应添加一个额外参数string filter

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

如果在您的网格中实施Single Field Searching,则应该

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,它描述了应该如何读取数据(参见documentation)。

如果您查看一些旧的答案,例如thisthisthisthis,您会找到足够的完整工作MVC项目的代码片段,您可以修改为你的建议。列表中的The first reference应该为您提供主要问题的答案如何从EF源或任何其他IQueryable<T>源准备jqGrid所需的数据。

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