将更新后的值从jqGrid弹出窗口传递给Controller MVC3

时间:2014-07-17 10:17:50

标签: jquery ajax asp.net-mvc-3 jqgrid

我有一个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();
        }

我在pop中有三行已更新。现在所有这些值以及id都必须发送到控制器。

任何帮助?

1 个答案:

答案 0 :(得分:1)

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

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

public ActionResult EditData(Product product)

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

<强>已更新: 再说一遍。 jqGrid使用HTTP状态代码来检测网格加载或编辑是否错误。因此,使用afterSubmit的{​​{1}}部分可能永远不会有效。另一方面,我建议你在每个网格中使用return [false, response.responseText]回调。请参阅the answer或详细信息。此外,如果出现错误,您可以考虑从控制器返回JSON数据。请参阅the old answerloadError HandleJsonExceptionAttribute的定义和用法。要在编辑时处理JSON错误,您需要使用errorTextFormat表单编辑回调。