MVC 中的 JQGrid 未加载网格

Question

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

查看代码

<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());
}

网格模型Class

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

试试这个：

检查 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 格式是否有效。在大多数情况下，这将是主要原因。

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

Answer 2

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

postData: { id: 11 }

或

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

您需要另外修改服务器的代码才能使用类似

的东西

return Json(someObjectWithReturnedData, JsonRequestBehavior.AllowGet);

我建议您将 loadError 回调添加到 jqGrid 选项列表（参见 the answer）并向 jqGrid 添加 gridview: true 和 autoencode: true 选项。

P.S。关于 "unable to get value of the property integer"、"unable to get value of the property decimalSeperator" 等错误。您应该在 jquery.jqGrid.min.js 之前验证您是否包含了像 i18n/grid.locale-en.js 这样的语言环境文件（参见 the documentation）。

MVC 中的 JQGrid 未加载网格

JQGrid in MVC Not Loading the Grid

c#

jquery

asp.net-mvc

asp.net-mvc-4

jqgrid