Question

我正在尝试将jqGrid集成到ASP.NET MVC 4 Razor视图中，并且遇到了让我感到困惑的障碍。当我尝试使用IE9在调试模式下查看视图时，我收到此Javascript错误：

Microsoft JScript runtime error: Unable to get value of the property 'id': object is null or undefined.

剃刀：

<link href="/Content/themes/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
@using(Html.BeginForm())
{
    <fieldset>
        <legend>@Model.FirstName @Model.LastName - Contacts/Providers</legend>
        <table id="clientContacts" cellpadding="0" cellspacing="0"></table>
    </fieldset>
}
<script type="text/javascript">
    $(document).ready(function () {
        $("#clientContacts").jqGrid({
            url: '@Url.Action("GetClientContactsAndProviders")',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['clientContactId', 'Type', 'Who', 'Phone', 'button', 'Comments'],
            colModel: [
                { name: 'clientContactId', index: 'clientContactId', hidden: true },
                { name: 'contactType', index: 'Type', width: 190, align: 'left' },
                { name: 'contactName', index: 'Who', width: 200, align: 'left' },
                { name: 'contactPhone', index: 'Phone', width: 100, align: 'left' },
                { name: 'newContactButton', index: 'button', width: 50, align: 'center' },
                { name: 'contactComments', index: 'Comments', width: 240, align: 'left'}
            ],
            rowNum: 20,
            width: 780,
            height: '100%'
        });
    });
</script>

动作：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult GetClientContactsAndProviders(string sidx, string sord, int page, int rows)
{
    var clientId = CookieHelper.GetClientIdCookieValue();
    var client = _clientRepo.GetClient(clientId);
    var contacts = client.Contacts.ToList();
    var model = new
        {
            total = 1,
            page = 1,
            records = contacts.Count,
            rows = contacts.Select(c =>
                new
                    {
                        clientContactId = c.ClientContactId.ToString(),
                        contactType = c.ContactType.Description,
                        contactName =
                            c.Contact.Person.FirstName + " " + c.Contact.Person.LastName,
                        contactPhone = c.Contact.Person.Phone1 ?? string.Empty,
                        newContactButton = string.Empty,
                        contactComments = c.Comments ?? string.Empty
                    }).ToArray()
        };
    return Json(model);
}

我在Chrome中没有收到此错误，而且我不能为我的生活弄清楚这个神秘的“id”属性是什么。请帮忙！

编辑（在@Justin Ethier回答之后）： 完全披露，没想到这很重要，但我试图在这种情况下传入四个“空”行。在这些情况下，clientContactId默认为0，我认为这可能是问题的一部分。我改变了我的网格Javascript如下：

$(document).ready(function () {
    $("#clientContacts").jqGrid({
        url: '@Url.Action("GetClientContactsAndProviders")',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['clientContactId', 'Type', 'Who', 'Phone', 'button', 'Comments'],
        colModel: [
            { name: 'clientContactId', index: 'clientContactId', hidden: true },
            { name: 'contactType', index: 'Type', width: 190, align: 'left' },
            { name: 'contactName', index: 'Who', width: 200, align: 'left' },
            { name: 'contactPhone', index: 'Phone', width: 100, align: 'left' },
            { name: 'newContactButton', index: 'button', width: 50, align: 'center' },
            { name: 'contactComments', index: 'Comments', width: 240, align: 'left'}
        ],
        rowNum: 20,
        width: 780,
        height: '100%',
        jsonReader: {
            root: 'rows',
            page: 'page',
            total: 'total',
            records: 'records',
            repeatitems: true,
            cell: 'cell',
            id: 'clientContactId',
            userdata: 'userdata',
            subgrid: { root: 'rows', repeatitems: true, cell: 'cell' }
        }            
    });
});

然后，最重要的是，当四行“空”时，我添加了这段代码来构建jqGrid期望的rows对象：

var rowBuilder = new List<object>();
for(var i = 0;i < contacts.Count; i++)
{
    rowBuilder.Add(new
                       {
                           id = i + 1,
                           cell = new
                                      {
                                          clientContactId = contacts[i].ClientContactId.ToString(),
                                          contactType = contacts[i].ContactType.Description,
                                          contactName =
                       contacts[i].Contact.Person.FirstName + " " + contacts[i].Contact.Person.LastName,
                                          contactPhone = contacts[i].Contact.Person.Phone1 ?? string.Empty,
                                          button = string.Empty,
                                          contactComments = contacts[i].Comments ?? string.Empty
                                      }
                       });
}
var model = new
                {
                    total = 1,
                    page = 1,
                    records = contacts.Count,
                    rows = rowBuilder.ToArray()
                };
return Json(model);

现在它有效！

Answer 1

jqGrid使用jsonReader来检索json数据。如果未明确提供，则网格使用以下默认值according to the jqGrid documentation：

{ 
  "total": "xxx", 
  "page": "yyy", 
  "records": "zzz",
  "rows" : [
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
      ...
  ]
}

我怀疑您收到错误的id是默认读者所期望的id列，结果集中缺少该列。您应该能够通过提供指定正确行ID的阅读器来解决此问题：

jsonReader : {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: true,
    cell: "cell",
    id: "clientContactId",
    userdata: "userdata",
    subgrid: {root:"rows", 
    repeatitems: true, 
    cell:"cell"
    }
},

这有帮助吗？

Answer 2

获取firefox中的单元格值，你必须使用chrome ...

Trow.cells[0].childNodes[0].nodeValue适用于所有浏览器

Trow.cells[0].innerText仅适用于不适用于Firefox和Chrome ....

'无法从jqGrid获取属性'Id''错误的值

2 个答案: