将更新的值从 jqGrid 弹出窗口传递到控制器 MVC3

Question

我有一个jqgrid，其中在编辑行期间弹出窗口被打开，并且在更新值之后它必须被发送到控制器。现在调用了控制器中的方法，但我不确定如何将值传递给控制器​​。

//jqGrid:

jQuery("#jQGridDemo").jqGrid({
    url: '@(Url.Action("LoadData", "Home"))',
    datatype: "json",
    mtype: 'GET',
    colNames: ['ProductId', 'Name', 'AdminContent', 'ProductTemplate', 'CreatedOnUtc'],
    colModel: [{ name: 'ProductId', index: 'ProductId', width: 200, align: 'left', sorttype: 'int' },
                    { name: 'Name', index: 'Name', width: 200, align: 'left', sortable: true, editable: true },
                    { name: 'AdminContent', index: 'AdminContent', width: 200, align: 'left', sortable: true, editable: true },
                    { name: 'ProductTemplate', index: 'ProductTemplate', width: 200, editable: true, edittype: "select", editoptions: { value: "1:VariantsInGrid;2:SingleProductVariant;3:MultipleProducts" }, align: 'left' },
                    { name: 'CreatedOnUtc', index: 'CreatedOnUtc', width: 200, align: 'left', edittype: 'text', formatter: 'date', formatoptions: { newformat: 'm-d-Y' }, datefmt: 'm-d-Y',
                        editoptions: {
                            size: 10, maxlengh: 10,
                            dataInit: function (element) {
                                $(element).datepicker({ dateFormat: 'yy.mm.dd' })
                            }
                        }, sortable: true, editable: true
                    }
        ],

                    jsonReader: {
                        root: 'rows',
                        total: 'total',
                        page: 'page',
                        records: 'records',
                        cell: 'cell',
                        id: 'id',
                        repeatitems: false
                    },
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: '#jQGridDemoPager',
    sortname: '_id',
    viewrecords: true,
    loadonce:true,
    sortorder: 'desc',
    caption: "Grid",
    gridview: true,
    autoencode: true,
    ignoreCase: true,
    editurl: '@(Url.Action("EditData", "Home"))'

});


jQuery("#jQGridDemo").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
               {
                   edit: true,
                   add: true,
                   del: true,
                   search: true,
                   searchtext: "Search",
                   addtext: "Add",
                   edittext: "Edit",
                   deltext: "Delete"
               },
               {   //EDIT
                   //                       height: 300,
                   //                       width: 400,
                   //                       top: 50,
                   //                       left: 100,
                   //                       dataheight: 280,
                   closeOnEscape: true, //Closes the popup on pressing escape key
                   reloadAfterSubmit: true,
                   drag: true,
                   afterSubmit: function (response, postdata) {
                       debugger;
                       if (response.responseText == "") {

                           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                           return [true, '']
                       }
                       else {

                           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
                           return [false, response.responseText]//Captures and displays the response text on th Edit window
                       }
                   },
                   editData: {
                       EmpId: function () {

                           var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                           var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                           return value;
                       }
                   }
               },
               {
                   closeAfterAdd: true, //Closes the add window after add
                   afterSubmit: function (response, postdata) {

                       if (response.responseText == "") {

                           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                           return [true, '']
                       }
                       else {
                           alert(response);
                           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
                           return [false, response.responseText]
                       }
                   }
               },
               {   //DELETE
                   closeOnEscape: true,
                   closeAfterDelete: true,
                   reloadAfterSubmit: true,
                   closeOnEscape: true,
                   drag: true,
                   afterSubmit: function (response, postdata) {
                       if (response.responseText == "") {

                           $("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
                           return [false, response.responseText]
                       }
                       else {
                           $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
                           return [true, response.responseText]
                       }
                   },
                   delData: {
                       EmpId: function () {
                           var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
                           var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
                           return value;
                       }
                   }
               },
               {//SEARCH
                   closeOnEscape: true

               }
        );

//控制器：

 [HttpPost]
        public ActionResult EditData()
        {

            return View();
        }

我在弹出窗口中有大约三行已更新。现在所有这些值连同 id 都必须发送到控制器。

有什么帮助吗？

Answer 1

重要的是要了解 jqGrid 总是将id 属性分配给在文档中命名为“rowid”的网格的每一行（<tr> 元素）。如果您有一些可以解释为 rowid 的本机唯一值，例如 ProductId，那么您应该在 colModel 的 ProductId 列的定义中包含 key: true 属性。或者，您可以使用jsonReader: {id: "ProductId"}。在这种情况下，每个项目的属性ProductId 将用作rowid。如果您使用jsonReader: {id: "ProductId"} 选项，您实际上不需要在colModel 中包含ProductId 列。

如果您正确填充网格，则 jqGrid 会将 rowid 作为id 参数与所有其他可编辑列一起发送到EditData 控制器。您可以使用prmNames: {id: "ProductId"} 将id 参数重命名为ProductId。在这种情况下，您可以将EditData 声明为

public ActionResult EditData(Product product)

在EditData 内部使用return View(); 会出错。您通常应该返回空数据。您只需要在没有trigger('reloadGrid') 的情况下使用$(this).jqGrid('setGridParam', { datatype: 'json' })，因为jqGrid 在默认情况下在编辑后重新加载网格（reloadAfterSubmit: true 是默认值）。

更新： 再说一句。 jqGrid 使用 HTTP 状态码来检测网格的加载或编辑是否错误。所以你使用return [false, response.responseText] 的afterSubmit 部分可能永远不会工作。另一方面，我建议您在每个网格中使用loadError 回调。请参阅the answer 或详细信息。此外，您也可以考虑从控制器返回 JSON 数据以防出错。参见HandleJsonExceptionAttribute 中[HandleJsonException] 的定义和用法the old answer。要在编辑时处理 JSON 错误，您需要使用errorTextFormat 表单编辑回调。