Asp.net mvc 使用WebApi在JqGrid中分配JSon数据

我正在使用MVC和webapi构建一个应用程序。在一个视图中，我使用JqGrid。以前，我们习惯于将本地数据分配给JqGrid，而JqGrid工作正常。现在由于逻辑上的一些变化，我们使用WebApi从服务器获取数据，这是一个Json数据，我们将其存储在变量中，然后将该数据对象分配给JqGrid，但数据不会显示。 当我给出web api的“url”而不是“数据”选项时，一切正常，但一旦我们使用“数据”选项，jqgrid就不起作用了。可能的原因是什么？这样做的原因是我想在本地添加、编辑和更新数据，然后当按下最终保存按钮时，数据返回到服务器

 $().ready(function () {        
    //{"total":1,"page":1,"records":3,"rows":[{"id":"1","cell":["1","Tomato        
    //Soup","db@db.com","db@db.com","Groceries"]},{"id":"2","cell":["2","Yo-
    //yo","db@db.com","db@db.com","Toys"]},{"id":"3","cell":
    //["3","Hammer","db@db.com","db@db.com","Hardware"]}]}
    //   

    $.getJSON("api/userwebapi/",
         function (data) {
             //userDataFromApi = jQuery.parseJSON(data);
             userDataFromApi =data;
             //alert(userDataFromApi[0].ID);
             ConfigureUserGrid(userDataFromApi);
         });


});

function ConfigureUserGrid(userDataFromApi) {

    var grdUsers = $("#grdUsers");
    var lastsel = 0;
    $("#grdUsers").jqGrid({            
        datatype: "json"
        , data: userDataFromApi
        //, url: "api/userwebapi"
        ,colNames: ['ID', 'Name', 'User Role', 'Email', 'Address']
        ,colModel: [
            { name: 'ID', index: 'ID', width: 80, hidden: true }
        , { name: 'Name', index: 'Name', width: 150 }
        , { name: 'UserRole', index: 'UserRole', width: 150 }
        , { name: 'Email', index: 'Email', width: 200, sortable: true }
        , { name: 'Address', index: 'Address', width: 200, sortable: true }]            
        , viewrecords: true            
        , pager: '#pager1'
        , mtype: 'GET'
    ,rowNum:true
    ,caption: 'My first grid'
    });                            //close of jQuery("#grdUsers").jqGrid({

    $("#grdUsers").jqGrid('navGrid', '#pager1',
            { add: false, del: false, edit: false, search: false, refresh: false });
}

---

问题的原因是jqGrid参数（选项）使用错误。确切地说，您使用了错误的jqGrid选项组合。Tony Tomov（jqGrid的开发人员）在每个新版本中都在jqGrid中添加了许多特性。如果可能的话，他想保持向后兼容性。因此，有很多选项没有明确的名称转换。许多选项只有在设置了其他一些选项时才起作用。与jQuery或jQuery UI的情况完全相同，输入参数没有验证。开始使用jqGrid的人会遇到很多问题

您案例中的问题是

data

参数与

datatype:“json”

一起使用。这是参数的错误组合。问题是jqGrid支持两种远程数据类型和一些本地数据类型

如果您使用

数据类型：“json”

或

数据类型：“xml”

，那么jqGrid会为您提供AJAX请求，用于初始填充网格以及每次排序、分页和（可选）过滤。无论以何种方式，都将发送对

url

的请求。一个使用由

mtype

参数指定的HTTP命令。数据的分页和排序必须在服务器端实现。请求包含请求的页码、页面长度、用于排序的列索引和排序方向。从服务器返回的数据应采用所述格式。如果您使用非标准数据格式，则可以使用jqGrid的

jsonReader

选项和

colModel

中的

jsonmap

（

xmlmap

）来指定应如何使用服务器响应填充网格

如果不想实现服务器端数据分页、排序和过滤，可以使用

loadonce:true

选项。在这种情况下，服务器应该一次返回所有数据。数据应根据初始排序列（根据您使用的

sortname

和

sortorder

进行一次排序）。首次加载数据后，jqGrid将自动将

数据类型更改为
“本地”

所有其他数据类型将被解释为本地数据类型。
数据
参数仅在数据类型为
时使用：“本地”
。在这种情况下，应使用另一种数据格式。可以使用
localReader
（请参阅）更改从
data
参数读取数据的方式

有一种特殊情况
datatype:“jsonstring”
，您可以使用
datatype:“json”
以接近的方式填充网格，但使用对象或json字符串作为输入。在这种情况下，应使用
datastr
（而不是
data
！！！）作为数据输入。首次填充后，jqGrid将把
数据类型
从
数据类型：“jsonstring”
更改为
数据类型：“local”

因此，您有一些解决问题的选项：


如果不想实现数据分页，请使用
url
和
loadonce:true
选项
要使用
数据类型：“jsonstring”
和
datastr
而不是
data
要使用
datatype:“local”
和
data
填充为命名项的数组（项的属性应与列的
name
属性的值相同）
在我看来，使用服务器的远程调用
url
和可选的
loadonce:true
比使用
数据
参数更好。无论如何，这两种方法都必须起作用。我想您应该修改
jsonReader
，以对应服务器的响应。无论如何，你都应该发布更多的代码和一些测试数据（服务器对
数据值的响应）来描述你的问题。oleg！！我添加了代码