jqGrid无法呈现数据 - 标题可见

Question

在玩jqGrid时，我遇到了以下问题。 jqGrid中的数据未呈现。即使我能够看到所有列的网格标题，但数据不会出现。我以JSON格式从控制器的action方法返回数据。

<script type="text/javascript">
        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {
                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [
                        //{ name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    //loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        root: "rows",
                        page: "page",
                        id: 0

                    }
                });
                alert("complete - success");
           });

        });


 </script>

控制器中的操作方法：

public JsonResult ContactList()
    {
        List<Contact> contacts = new List<Contact>();

        contacts.Add ( new Contact()
            {
                FirstName = "John",
                LastName = "Doe",
                Email = "john.doe@gmail.com"
            }
        );



        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

网络选项卡输出显示调用Action方法'ContactList'返回的JSON数据，如下面的屏幕截图所示。

jqGrid标头也正在渲染，但Controller的Action方法返回的数据（以JSON格式）不会渲染到jqGrid中。

我在哪里犯了错误？

即使在@Oleg在下面的评论中修改代码后，问题仍然存在。没有错误。弹出“loadComplete”事件的警报。

<script type="text/javascript">

        $(document).ready(function () {
            //alert("this is a test");
            $(btnContactList).click(function () {



                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["First Name", "Last Name", "EMail"],
                    colModel: [

                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }
                });
                alert("complete - success");

            });

        });

Answer 1

您使用非常旧的版本。它没有输入格式的自动检测。因此，您必须指定与您的数据完全对应的jsonReader。至少需要jsonReader的两个属性：

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; } 
}

以上设置应解决主要问题。另外，应该理解jqGrid为每一行（每个id元素）分配<tr>属性。如果您稍后将实现jqGrid的其他功能（例如编辑），则需要按ID标识行。因此，严格建议在输入数据中包含id属性。如果您的Contact对象的本机ID具有其他名称（例如"Id"或"ContactId"），则可以在id内指定其他jsonReader属性（作为id: "Id"或id: "ContactId"）。您也应该在服务器响应中包含相应的属性。

我建议您考虑将jqGrid更新为最新的free jqGrid（或至少更新为free jqGrid 4.8）。您可以在the readme和wiki中详细了解免费jqGrid的功能。免费的jqGrid是我开发的jqGrid的分支。

Answer 2

终于奏效了。谢谢@Oleg！我在这里看了另一篇文章http://goo.gl/Pg5CMn

另外，我认为我犯了另一个错误。我忘了用双引号括起btnContactList。在Internet Explorer中调试后，我发现了。其次，正如@Oleg建议需要jsonReader属性。可能是因为我正在使用的jqGrid版本。

<script type="text/javascript">
            $(document).ready(function () {
            //alert("this is a test");
            $("#btnContactList").click(function () {

                $("#ContactTable").jqGrid({
                    url: "/Contact/ContactList",
                    datatype: "json",
                    colNames: ["ID", "First Name", "Last Name", "EMail"],
                    colModel: [
                        { name: "ContactId", index: "ContactId", width: 80 },
                        { name: "FirstName", index: "FirstName", width: 100 },
                        { name: "LastName", index: "LastName", width: 100 },
                        { name: "EMail", index: "EMail", width: 200 }
                    ],
                    //data: result,
                    mtype: 'GET',
                    loadonce: true,
                    viewrecords: true,
                    gridview: true,
                    caption: "List Contact Details",
                    emptyrecords: "No records to display",
                    jsonReader: {
                        repeatitems: false,
                        //page: function () { return 1; },
                        root: function (obj) { return obj; },
                        //records: function (obj) { return obj.length; }
                    },
                    loadComplete: function () {
                        alert("Complete ok!")
                    },
                    loadError: function (jqXHR, textStatus, errorThrown) {
                        alert('HTTP status code: ' + jqXHR.status + '\n' +
                            'textstatus: ' + textstatus + '\n' +
                            'errorThrown: ' + errorThrown);
                        alert('HTTP message body  (jqXHR.responseText: ' +     '\n' + jqXHR.responseText);
                    }

                });
                alert("after completion");

            });


        });
</script>