我正在尝试将 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' }
}
});
});
然后，最重要的是，当四行“空”时，我添加了这段代码来构建rowsjqGrid 期望的对象：
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);
现在它起作用了！