代码之家 › 专栏 › 技术社区 › David Fox

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

jqgrid linq-to-entities data-binding linq asp.net-mvc

David Fox · 技术社区 · 14 年前

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

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

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

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

所有我的视图模型都包含来自多个不同表的数据。如何将视图模型属性绑定到jqGrid?我在玩 Trirand jqGrid的MVC 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(parameters)中,我创建了一个匿名类型(命名为datasource),其中包含 Phil Haack's 参数;总计、页、记录和行。此属性在SearchTestGridDataRequested的最后一条语句中被JSON定义。

1 回复 | 直到 14 年前

Community CDub 8 年前

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

一般来说,要在MVC中使用jqGrid,可以有一个包含两个元素的页面(视图) <table> 以及 <div> 用于传呼机。两者( <表格> 和 <分区> ) 必须拥有和 id 属性。不需要将其他复杂视图绑定到模型。

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

行动 获取数据 可以定义为:

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

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

如果需要搜索支持,则需要添加其他参数。如果你想用 Advanced Searching 或 Toolbar Searching 具有 stringResult: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 ).

如果你从一些古老的答案里 this , this , this 或 this 您将发现足够多的完整工作的MVC项目的代码片段,您可以根据您的建议进行修改。 The first reference 从名单上应该可以看到 关于你主要问题的答案 如何从EF源或任何其他源准备数据 IQueryable<T> 获取jqGrid需要的数据。

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