'無法從jqGrid獲得屬性值'Id''錯誤

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西爾答案）： 完全披露，沒想到這要緊，但我試圖在四個一「空」的行通過在這種情況下。在這些情況下，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' } 
     }    
    }); 
}); 

然後，最重要的是，當四個行是「空」我加入這個代碼來構建rows對象的jqGrid預計：

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

GET Firefox中的單元格的值，鍍鉻你必須使用...

Trow.cells[0].childNodes[0].nodeValue將爲所有瀏覽器上運行，而

Trow.cells[0].innerText只會工作的，即不是Firefox和Chrome ....