Question

我正在尝试在我的MVC 4应用程序中创建一个jQGrid，但是JQGrid Edit Action无法正常工作。请参阅下面的代码。

.cshtml

<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
    url: '/Home/FillGrid/',
    datatype: "json",
    colNames: ['Id', 'Name', 'Description', 'Created'],
    colModel: [{ name: 'Id', Index: 'Id', width: 100, align: 'left' },
               { name: 'Name', Index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
               { name: 'Description', Index: 'Description', width: 400, align: 'left', sortable: true, editable: true },
               { name: 'Created', Index: 'Created', width: 100, align: 'left' }],
    rowNum: 10,
    mtype: 'GET',
    loadonce: true,
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: 'id',
    viewrecords: true,
    sortorder: 'desc',
    caption: "List Employee Details",
    editurl: '@Url.Action("Update", "Home")',        
    deleteurl: '@Url.Action("Delete", "Home")', 
});

$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
           {
               edit: true,
               add: true,
               del: true,
               search: true,
               searchtext: "Search",
               addtext: "Add",
               edittext: "Edit",
               deltext: "Delete"
           },
           {//EDIT
               url: '@Url.Action("Update", "Home")',
               width: 400,
           },
           {
               width: 400,
               //color: Red
           },
           {//DELETE
               url: '@Url.Action("Delete", "Home")',
           },
           {//SEARCH
               closeOnEscape: true
           }
    );

  </script>

动作

    public ActionResult FillGrid(string sidx, string sord, int page, int rows)
    {
        List<Master> models = new List<Master>();

        int pageIndex = Convert.ToInt32(page) - 1;
        int pagesize = rows;
        int totalrecords = 0;
        int totalpages = 0;

        using (var db = new jQGridDemoEntities())
        {
            totalrecords = db.Masters.Count();
            totalpages = (int)Math.Ceiling((float)totalrecords / (float)pagesize);

            models = db.Masters.OrderBy(x => x.Id).Skip(pageIndex * pagesize).Take(pagesize).ToList();
        }

        var jsondata = new
        {
            total = totalpages,
            page,
            records = totalrecords,
            rows = (
            from master in models
            select new
            {
                i = master.Id,
                cell = new string[] { master.Id.ToString(), master.Name.ToString(), master.Description.ToString(), master.Created.ToString() }
            }).ToArray()
        };

        return Json(jsondata, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Update(string Name, string Description)
    {
        int ret = 2;
        return Json(ret);
    }

    [HttpPost]
    public ActionResult Delete(int Id)
    {
        int ret = 2;
        return Json(ret);
    }

我已经在jQgrid initilize部分指定了editurl和deleteurl。

例如，我需要更新编辑弹出窗口中的名称和描述字段。

更新操作在“编辑”弹出窗口中触发，但提交操作的内部不起作用。

绑定字段需要任何配置。请帮忙。

Answer 1

您当前的代码包含一些错误。第一行

from master in models
select new
{
    i = master.Id,
    cell = new string[] { master.Id.ToString(), ... }
}

您指定i属性（请参阅i = master.Id），而不是使用id名称（id = master.Id）。可以更改输入数据中使用的id的名称，为id选项分配jsonReader属性（请参阅documentation）。默认值为id: "id"。要使用i代替id，可以使用jsonReader: { id: "i" }选项。

指定用于行的id的另一种好方法：使用key: true属性来定义“Id”列。顺便说一下，如果您想向用户显示该行的id并使用key: true属性，那么您不需要发送master.Id两次（一次为id = master.Id还有一次cell = new string[] { master.Id.ToString(), ... }）。而不是你可以使用像

这样的东西

return Json((
    from master in models
    select new [] {
        master.Id.ToString(),
        master.Name,
        master.Description,
        master.Created.ToString()
    }
).ToArray(), JsonRequestBehavior.AllowGet);

如果从FillGrid返回的数据将直接是数组或项目。您不需要在返回的数据中设置total，page和records属性，因为您使用loadonce: true并且jqGrid将忽略所有属性。

同样，prmNames选项可用于将添加/编辑和删除操作的默认id名称用于重命名为其他名称。

下一个问题。您使用sortname: 'id'，但只有name: 'Id'列。因此，您应该将sortname: 'id'更改为sortname: 'Id'。删除操作使用int Id。因此，您可以使用prmNames: { id: "Id" }选项或将int Id重命名为int id。该选项也将用于添加/编辑阳离子。因此，您应该将int Id添加到int id到Update操作，具体取决于您是否使用prmNames: { id: "Id" }选项。

jQgrid编辑命令无法在mvc操作方法中呈现

1 个答案: