MVC中的JQGrid不加载网格

Question

我有一个 MVC 编辑视图，其中包含当然可以编辑的联系信息。在该视图中，我想添加一个包含 JQGrid 的部分，允许用户对联系人进行 CRUD 注释，但我的网格没有加载数据，也没有调用控制器上的方法。谁能给我任何insite？

查看代码

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-info">
           Contact Note</h3>
    </div>
    <div class="panel-body">
        <div class="scrollableContainer" style="margin-top: -10px;">
            <table id="JQGrid1"></table>
            <div id="JQGrid1_pager"></div>
        </div>
    </div>
</div>

    <script>
        $("#JQGrid1").jqGrid({
            url: '@Url.Action("GetNotes", "Contact")',
            mtype: "GET",
            datatype: "json",
            page: 1,
            jsonReader: { id: document.getElementById('SelectedContact_ContactID').value },
            prmNames: { id: document.getElementById('SelectedContact_ContactID').value },
            colNames: ["Id", "ContactId", "Note", "Date Created", "Created By"],
            colModel: [
                { key: true, width: 50, name: "ID", hidden: false },
                { width: 60,  name: "ContactID", hidden: false },
                { width: 460,  name: "Note", hidden: false },
                { width: 160,  name: "DateCreated",
                    formatter: "date", formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "mm-dd-yyyy" }, hidden: false },
                { width: 160,  name: "CreatedBy", hidden: false },
            ],
            height: "auto",
            caption: "Notes",
            rowNum: 5,
            pager: "#JQGrid1_pager",
        });
      </script>

控制器代码

[HttpGet]
public JsonResult GetNotes(int id)
{
    var gridModel = new ContactNotesJQGridModel();
    var resultset = _contactNoteRepository.GetNotes(id);
    return gridModel.ContactNotesGrid.DataBind(resultset.AsQueryable());
}

网格模型类

public class ContactNotesJQGridModel
{
    public JQGrid ContactNotesGrid { get; set; }

    public ContactNotesJQGridModel()
    {
        ContactNotesGrid = new JQGrid
        {
            Columns = new List<JQGridColumn>()
            {
                new JQGridColumn {DataField = "ID", PrimaryKey = true},
                new JQGridColumn {DataField = "ContactId"},
                new JQGridColumn {DataField = "Note"},
                new JQGridColumn {DataField = "DateCreated"},
                new JQGridColumn {DataField = "CreatedBy"},
            }
        };
    }

然后在联系人控制器的编辑调用中，我设置 model.ContactNotesGrid = new ContactNotesJQGridModel GetNotes(int id) 永远不会执行，即使它在 jquery 中指定。

Answer 1

您应该使用postData 将自定义参数添加到服务器响应中：

postData: { id: 11 }

或

postData: {
    id: function () {
        return document.getElementById('SelectedContact_ContactID').value;
    }
}

您需要另外修改服务器的代码以使用类似的东西

return Json(someObjectWithReturnedData, JsonRequestBehavior.AllowGet);

我建议您在 jqGrid 选项列表中添加 loadError 回调（请参阅 the answer），并在 jqGrid 中添加 gridview: true 和 autoencode: true 选项。

附：关于“无法获取属性整数的值”、“无法获取属性小数分隔符的值”等错误。您应该验证您是否包含了诸如i18n/grid.locale-en.js 之前 jquery.jqGrid.min.js 之类的语言环境文件（请参阅the documentation）。

Answer 2

试试这个：

检查 1： 在文档就绪事件中移动您的 Jquery 脚本：

$( document ).ready(function() {
    console.log( "ready!" );
});

检查 2： 检查您的服务器请求是否有任何问题：

protected void Application_Error(object sender, EventArgs e) 
{
  Exception exception = Server.GetLastError();
  Response.Clear();
}

在您的Global.asax 中添加上述代码，并确保调用过程中没有异常。 （放置断点并检查）

检查 3：

查看您的浏览器控制台日志 (F12)。如果有任何异常日志，请提供。

检查 4：

确保调用是否成功，预期的 json 格式是否有效。在大多数情况下，这将是主要原因。

以上只是我的猜测/如果我有问题，这是我首先要做的。 :)