如何将视图模型绑定到jqGrid？ [英] How can I bind my view model to a jqGrid?

问题描述

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

Using MVC2 and EF framework. Most references/blog posts I've found so far pertain to binding a single table and its data (sometimes hierarchical) to a jqGrid with editing capabilities. I don't need this. I don't even need to edit the data--just display. I need to display and page the data. Sorting is a plus, searching a bonus I guess.

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

jqGrid's documentation shows the data source being bound as follows:

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

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

But, I only have my Entities context without a reference to the view model. Could I create an Entity set here? Not very familiar with this.

我的所有视图模型都包含来自几个不同表格的数据。将视图模型属性绑定到jqGrid可以做些什么？我正在玩 Trirand 为期三天的jqGrid for MVC试用版。再次，我只需要显示和页面数据，但我不知道如何将视图模型连接到jqGrid数据源。

All my view models contain data from several different tables. What can I do to bind the view model properties to a jqGrid? I'm playing with Trirand's 30-day trial of jqGrid for MVC. Again, I just need to display and page the data, but I'm not sure how to hook up the view models to the jqGrid data source.

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的参数;总计，页面，记录和行。这个属性在SearchTestGridDataRequested的最后一个语句中是JSON'ified。

In testmodel and testmodel(parameters), I create an anonymous type (named datasource) containing Phil Haack's parameters; total, page, records and rows. This property is JSON'ified in the last statement of SearchTestGridDataRequested.

推荐答案

我不太了解jqGrid的商业版本，但是产品在内部使用开源jqGrid，所以我可以解释它应该如何与ASP.NET MVC协同工作。

I don't really know the commercial version of the jqGrid, but the product use internally the Open Source jqGrid and so I could explain how it should work together with ASP.NET MVC.

一般来说，在MVC中使用jqGrid，你可以具有用于传呼机的两个元素< table> 和< div> 的页面（视图） 。两者（< table> 和< div> ）必须 c $ c> id 属性。没有其他复杂的查看绑定到模型是必需的。

In general to use jqGrid in MVC you can have a page (a View) with two elements <table> and a <div> used for the pager. Both (<table> and <div>) must have and id attribute. No other complex View binding to the Model is required.

现在你可以放在页面的标题中加载所需的所有JavaScript：jQuery，jqGrid和你特定的页面它们定义要显示的jqGrid，例如列模型和不同的jqGrid参数。您需要将网格绑定到数据的最重要的参数是 url 参数。如果您在 Home 控制器中定义操作 GetData ，那么 url 可以是Home / GetData或'<％= Url.Content（〜/ Home / GetData）％> ;'。这足够有数据绑定。

Now you can place in the header of the page loading of all JavaScripts needed: jQuery, jqGrid and you page specific JavaScript which define jqGrid which you want to display, for example column model and different jqGrid parameters. The most important parameter which you need to bind the grid to the data are url parameter. If you define for example in the Home controller the action GetData then the url could be "Home/GetData" or '<%= Url.Content("~/Home/GetData")%>'. This is enough of have "data binding". No usage of Model data is required.

动作 GetData 可以定义如下：

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

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

if you want support only data sorting and paging but don't need any searching (filtering) support.

搜索支持的情况需要添加其他参数。如果您要使用高级搜索或工具栏搜索与 stringResult：true 参数你应该添加一个额外的参数 string filter ：

In case of the searching support you need to add an additional parameters. If you want to use Advanced Searching or Toolbar Searching with stringResult:true parameter you should add one additional parameter string filter:

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

您的网格中的href =http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching =noreferrer>单字段搜索应该是

In case of implementing Single Field Searching in your grid it should be

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

您还可以进行通用操作：

You can also make an universal action:

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

所以在所有情况下，你必须做的几乎一样，但你会收到一些其他形式的其他参数。

So in all cases you have to do almost the same, but you will receive additional parameters in a little other form.

现在您应该决定要从哪个窗体中提供控制器操作中的jqGrid数据。 jqGrid非常灵活，您可以以标准格式回收数据

Now you should decide in which form you want provide the data for jqGrid from the controller action. jqGrid is very flexible and you can either get back data in the standard format

{ 
  "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 ，该参数描述了数据应如何读取（参见文档）。

or in another (more readable, but more long) format. In the last case you will have to define a small parameter jsonReader which describe how the data should be read (see documentation).

如果你看着一些旧的诸如这个，这个，此或这个你会发现足够的代码片段的全工作的MVC项目，你可以修改你的建议。 第一个列表中的参考应该希望您主要问题的答案如何从EF源或任何其他 IQueryable 来源jqGrid需要的数据。

If you look inside of some old answers like this, this, this or this you will find enough code fragments of full working MVC projects which you can modify for your propose. The first reference from the list should gives hopefully the answer on you main question how to prepare data from EF source or any other IQueryable<T> source the data which jqGrid need.

另一个我的旧答案，其中我描述了一般模式如何jqGrid可以在MVC环境中更详细地使用，但对于测试已经有不同实现方式的人来说。

In another my old answer where I describe the general schema how jqGrid can be used in MVC environment more detailed, but for people who tested already different implementation ways.

这篇关于如何将视图模型绑定到jqGrid？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！