JQGrid 不填充数据。（始终为空网格）

Question

我正在尝试使用 MVC4 WebApi 创建一个 jqGrid。我查看了各种示例，最后使用此 link 作为参考。问题是网格没有填充数据，但它正在命中服务器的 GET 方法（在那里保留断点进行测试）。我在本地 IIS 上托管了我的应用程序。下面是jqgrid页面(index.htm)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>My First Grid</title>
    <link href="../Content/jquery.jqGrid/ui.jqgrid.css" type="text/css" rel="stylesheet" />
    <style>
        html, body {
            font-size: 75%;
        }
    </style>
    <script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
    <script src="../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.jqGrid.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var API_URL = "/WebApiOne/api/task/";
            jQuery("#gridMain").jqGrid({
                url: API_URL,
                data : API_URL,
                datatype: 'json',
                contentType: "application/json; charset=UTF-8",
                mtype: 'GET',
                pager: '#pagernav',
                sortable: true,
                height: 200,
                viewrecords: true,
                colNames: ['TaskID', 'ProjectID', 'ProjectName', 'TaskName', 'TaskStatus'],
                colModel: [{ name: 'TaskID', index: 'TaskID', width: 40, sorttype: "int" },
                 { name: 'ProjectID', index: 'ProjectID', editable: true, edittype: 'int', width: 70 },
                 { name: 'ProjectName', index: 'ProjectName', editable: true, edittype: 'text', width: 70 },
                 { name: 'TaskName', index: 'TaskName', editable: true, edittype: 'text', width: 50, align: "right" },
                 { name: 'TaskStatus', index: 'TaskStatus', editable: true, edittype: 'text', width: 50, align: "right"}
                ],
                caption: "CRUD With ASP.NET Web API",
                autowidth: true
            });
        });
    </script>
</head>
<body>

    <table id="gridMain">
    </table>
    <div id="pagernav">
    </div>
</body>
</html>

这是我的服务器端代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace WebApiOne.Controllers
{
    public class Task
    {
        public int TaskID { get; set; }
        public int ProjectID { get; set; }
        public string ProjectName { get; set; }
        public string TaskName { get; set; }
        public string TaskStatus { get; set; }
    }

    public class TaskController : ApiController
    {
        // GET api/task
        public IEnumerable<Task> Get()
        {
            Task[] tasks = new Task[2];

            tasks[0] = new Task()
            {
                TaskID = 1,
                ProjectID = 1,
                ProjectName = "ProjectOne",
                TaskName = "FirstPage Development",
                TaskStatus = "InProgress"

            };

            tasks[1] = new Task()
            {
                TaskID = 2,
                ProjectID = 1,
                ProjectName = "ProjectOne",
                TaskName = "Second Page Development",
                TaskStatus = "Yet To Start"

            };

            return tasks;
        }

        // GET api/task/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/task
        public void Post([FromBody]string value)
        {
        }

        // PUT api/task/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/task/5
        public void Delete(int id)
        {
        }
    }
}

但是当我浏览 localhost/WebApiOne/api/task/ 时，我得到 json 格式的原始数据：[{"TaskID":1,"ProjectID":1,"ProjectName":"ProjectOne","TaskName":"FirstPage Development","TaskStatus":"InProgress"},{"TaskID":2,"ProjectID":1,"ProjectName":"ProjectOne","TaskName":"Second Page Development","TaskStatus":"Yet To Start"}]

它证明服务器可以正常工作，我在前端缺少一些东西。

Answer 1

在您的 jqGrid 定义中添加以下代码

jsonReader : {
   repeatitems: false
},

Answer 2

我建议您不要使用旧版本的 jqGrid，例如 2.5 年前发布的版本 4.4.4。我建议您使用 free jqGrid. If you use prefer to use NuGet, then you can use Install-Package free-jqGrid to install the current version of free jqGrid (see here). See the wiki 的当前版本 (4.9.2) 和每个已发布版本的自述文件以获取更多信息。

一些更改可以独立于 jqGrid 的版本使用：

data : API_URL 如果你使用 datatype: 'json' 应该被删除。
contentType是jQuery.ajax的选项。如果你需要在 jqGrid 中设置它，你应该使用 ajaxGridOptions: {contentType: "application/json; charset=UTF-8"}.
如果您使用旧版本的 jqGrid，那么您需要在 jsonReader: {repeatitems: false, root: function (obj) { return obj; }} 的形式中添加 jsonReader。如果您使用免费的 jqGrid，那么它会自动检测您当前 JSON 响应的结构，不需要 jsonReader。
如果您不打算实施服务器端数据分页和排序，则应添加 loadonce: true 选项。你应该return 所有的数据并且jqGrid会在客户端进行排序，分页和过滤。
如果您使用旧版本的 jqGrid，您应该添加 gridview: true 以提高性能。免费的 jqGrid 默认使用该选项。
我建议您使用 height: "auto" 而不是 height: 200，但最佳选择取决于您的具体要求。
如果从服务器 return 编辑的数据是纯数据而不是单元格的 HTML 片段，您应该添加 autoencode: true 选项。
我建议您从 colModel 和具有默认值 (edittype: 'text') 的值中删除不需要的 index 属性。
您应该将 key: true 属性添加到 TaskID 列。输入数据必须包含关于rowid的信息。特别是为了能够编辑数据，您应该使用正确的 rowid 值。
如果您使用免费的 jqGrid，那么您可以删除 <div id="pagernav"></div> 并将 pager: '#pagernav' 替换为 pager: true 选项。免费的jqGrid可以自动创建寻呼机需要的<div>。

已更新： 服务器代码可以修改为以下内容，例如：

using System.Collections.Generic;
using System.Web.Http;

namespace WebApiOne.Controllers
{
    public class Task
    {
        public int TaskID { get; set; }
        public int ProjectID { get; set; }
        public string ProjectName { get; set; }
        public string TaskName { get; set; }
        public string TaskStatus { get; set; }
    }

    public class TaskController : ApiController
    {
        // GET api/task
        public IEnumerable<Task> Get() {
            Task[] tasks = {
                new Task {
                    TaskID = 1,
                    ProjectID = 1,
                    ProjectName = "ProjectOne",
                    TaskName = "FirstPage Development",
                    TaskStatus = "InProgress"
                },
                new Task {
                    TaskID = 2,
                    ProjectID = 1,
                    ProjectName = "ProjectOne",
                    TaskName = "Second Page Development",
                    TaskStatus = "Yet To Start"

                }
            };
            return tasks;
        }

        // GET api/task/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/task
        public void Post ([FromBody]Task task)
        {
            //perform new Row Add to DB
            // task.TaskID will be 0 here
        }

        // PUT api/task/5
        public void Put (int id, [FromBody]Task task)
        {
            //perform Db Update
            // task.TaskID and id are identical
        }

        // DELETE api/task/5
        public void Delete (int id)
        {
            // Delete row in DB.
        }
    }
}

客户端代码可以

$(document).ready(function() {
    "use strict";
    var apiUrl = "/WebApiOne/api/task/";
    jQuery("#gridMain").jqGrid({
        url: apiUrl,
        editurl: apiUrl,
        datatype: "json",
        gridview: true,
        height: "auto",
        iconSet: "fontAwesome",
        autoencode: true,
        sortable: true,
        viewrecords: true,
        loadonce: true,
        prmNames: { id: "TaskID" },
        colNames: ["TaskID", "ProjectID", "ProjectName", "TaskName", "TaskStatus"],
        colModel: [
            { name: "TaskID", width: 60, key: true, editable: false, sorttype: "int" },
            { name: "ProjectID", width: 90 },
            { name: "ProjectName", width: 190 },
            { name: "TaskName", width: 170, align: "right" },
            { name: "TaskStatus", width: 170, align: "right" }
        ],
        cmTemplate: { editable: true },
        //autowidth: true,
        formEditing: {
            width: 400,
            reloadGridOptions: { fromServer: true },
            serializeEditData: function (postdata) {
                var copyOfPostdata = $.extend({}, postdata);
                if (postdata.TaskID === "_empty") { // ADD operation
                    postdata.TaskID = 0; // to be easy to deserialize
                }
                delete copyOfPostdata.oper; // remove unneeded oper parameter
                return copyOfPostdata;
            }
        },
        formDeleting: {
            mtype: "DELETE",
            reloadGridOptions: { fromServer: true },
            serializeDelData: function () {
                return ""; // don't send and body for the HTTP DELETE
            },
            onclickSubmit: function (options, postdata) {
                //var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
                //p.datatype = "json";
                options.url = apiUrl + encodeURIComponent(postdata[0]);
            }
        },
        pager: true
    }).jqGrid("navGrid", {}, {
        mtype: "PUT",
        onclickSubmit: function (options, postdata) {
            //var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
            //p.datatype = "json"; // reset datatype to reload from the server
            options.url = apiUrl + encodeURIComponent(postdata[this.id + "_id"]);
        }
    }).jqGrid("filterToolbar") // add searching toolbar for local sorting (bacsue of loadonce:true) in the grid
        .jqGrid("gridResize");
});

以上代码使用了free jqGrid with Font Awesome. The corresponding demo project you can load from here。您应该在服务器代码中设置断点并使用 Fiddler 查看所有请求是否按预期工作。服务器代码应在 cause 数据库中实现 delete/edit/add。请务必了解该演示基于您的原始代码，并且不会修改数据库中的任何数据。编辑数据后将从服务器重新加载，以确保在分配添加后使用最后的数据和服务器端 ID。因为数据不会保存在数据库中，也不会在服务器上修改，所以加载后数据将在网格中显示不变。这意味着只需要扩展服务器代码以支持数据修改。我只想展示如何配置 客户端部分 (jqGrid) 以向服务器发送正确的请求。

JQGrid 不填充数据。（始终为空网格）

JQGrid Not populating data. (Always empty grid)

c#

get

jqgrid

asp.net-mvc-4

asp.net-web-api

JQGrid 不填充数据。 （始终为空网格）

JQGrid Not populating data. (Always empty grid)

c#

get

jqgrid

asp.net-mvc-4

asp.net-web-api

JQGrid 不填充数据。（始终为空网格）