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

问题描述

使用 MVC2 和 EF 框架.到目前为止，我发现的大多数参考资料/博客文章都与将单个表及其数据(有时是分层的)绑定到具有编辑功能的 jqGrid 相关.我不需要这个.我什至不需要编辑数据——只需要显示.我需要显示和分页数据.排序是加分项，我猜搜索是加分项.

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

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

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

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

编辑

public ActionResult test(){var gridModel = new testmodel();var viewModel = gridModel.testgrid;设置测试网格(视图模型)；返回视图(网格模型)；}私有无效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);返回 Json(gridModel.datasource);}

在测试模型和测试模型(参数)中，我创建了一个包含 Phil Haack 的 参数；总计、页、记录和行.该属性在 SearchTestGridDataRequested 的最后一条语句中被 JSON 化.

解决方案

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

通常要在 MVC 中使用 jqGrid，您可以拥有一个页面(一个视图)，其中包含两个元素

和一个

用于寻呼机.(

和

) 必须 都具有 id 属性.不需要其他复杂的视图绑定到模型.

现在您可以将所有需要的 JavaScript 加载到页面的标题中:jQuery、jqGrid 和您页面特定的 JavaScript，这些 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,字符串 searchField、字符串 searchString、字符串 searchOper)

您也可以进行通用操作:

JsonResult GetData (string sidx, string sord, int page, int rows, string _search字符串 searchField、字符串 searchString、字符串 searchOper、字符串过滤器)

因此，在所有情况下，您都必须执行几乎相同的操作，但您会收到一些其他形式的附加参数.

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

<代码>{"total": "xxx",//总页数"page": "yyy",//返回数据的当前页码"records": "zzz",//总记录数行":[{"id" :"1", "cell" :["cell11", "cell12", ..., "cell1n"]},{"id" :"2", "cell":["cell21", "cell22", ..., "cell2n"]},...]}

或另一种(更易读，但更长)的格式.在最后一种情况下，您必须定义一个小参数 jsonReader 来描述应如何读取数据(请参阅 文档).

如果您查看一些旧答案，例如 这个，这个、这个或这个 你会找到足够多的完整工作 MVC 项目的代码片段可以修改您的建议.第一个列表中的参考应该能够回答您的主要问题如何从 EF 源或任何其他 IQueryable 源准备数据，这些数据来自 jqGrid需要.

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

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'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.

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.

Edit

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

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.

解决方案

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.

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.

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.

The action GetData could be defined as following:

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.

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)

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.

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"]},
      ...
  ]
}

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).

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.

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屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.