从jqGrid的弹出窗口控制器MVC3通过更新后的值控制器、弹出窗口、jqGrid

2023-09-11 00:44:06 作者:青衫烟雨

我有一个 jqGrid的其中在一个行弹出被打开的编辑和更新它必须被发送到控制器的值之后。现在,在控制器中的方法被调用,但我不知道如何将值传递给控制器​​。

I have a jqgrid in which during edit of a row the popup gets opened and after updating the values it has to be sent to the controller. Now the method in the controller is called but i'm not sure how to pass the values to the controller.

// 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

               }
        );

//控制器:

//Controller:

 [HttpPost]
        public ActionResult EditData()
        {

            return View();
        }

我在其中被更新弹出一些三行。现在连同ID的所有这些值已经被发送到控制器。

I have some three rows in the pop which is been updated. Now all those values along with the id has to be sent to the controller.

任何帮助吗?

推荐答案

据了解重要的是jqGrid的总是指定 ID 属性,每一行(< TR> 元素)网格的其中一个名字ROWID的文件中。如果你有一些本地独特的价值可以是PTED为ROWID,如的ProductId 除$ P $,那么你应该包括键:真正的属性的ProductId 列的定义, colModel 。或者您可以使用 jsonReader:{ID的ProductId} 。在这种情况下的财产的ProductId 每个项目都将被用作ROWID。如果你使用 jsonReader:{ID的ProductId} 选项你并不真的需要包括列的ProductId colModel

It's important to understand that jqGrid always assign id attribute to every row (<tr> element) of the grid which one names "rowid" in the documentation. If you have some native unique value which can be interpreted as the rowid, like ProductId then you should include key: true property to the definition of ProductId column in colModel. Alternatively you can use jsonReader: {id: "ProductId"}. In the case the property ProductId of every item will be used as rowid. If you use jsonReader: {id: "ProductId"} option you don't really need to include the column ProductId in colModel.

如果您填写的网格正确则jqGrid的会派的rowid为 ID 参数添加到 EditData 控制器连同所有其他可编辑的栏目。您可以使用 prmNames:{ID的ProductId} 重命名 ID 参数的ProductId 。在这种情况下,可以声明 EditData 正如

If you fill the grid correctly then jqGrid will send rowid as id parameter to the EditData controller together with all other editable columns. You can use prmNames: {id: "ProductId"} to rename id parameter to ProductId. In the case you can declare EditData just as

public ActionResult EditData(Product product)

的使用返回视图(); EditData 里面会是错误的。你通常应该返回空数据。你需要使用 $(本).jqGrid('setGridParam',{数据类型:'json的'})只是没触发('reloadGrid) ,因为jqGrid的重载电网的在按默认的编辑。( reloadAfterSubmit:真正的为默认值)

The usage of return View(); inside of EditData will be wrong. You should return empty data typically. You need to use $(this).jqGrid('setGridParam', { datatype: 'json' }) only without trigger('reloadGrid') because jqGrid reload the grid after editing per default (reloadAfterSubmit: true is default value).

更新时间:: 还有一个的话。 jqGrid的使用HTTP状态code检测装载网格或编辑是否有误或没有。所以 afterSubmit 在您使用返回部分[假的,response.responseText] 可能永远不会工作。在另一边,我会建议你使用 loadError 回调每个网格研究。请参见答案或细节。另外,你可以考虑从控制器在错误的情况下返回JSON数据了。请参阅 [HandleJsonException] 中的老答案。处理JSON错误的情况下编辑,您将需要使用 errorTextFormat 表单编辑的回调。

UPDATED: One more remark. jqGrid use HTTP status code to detect whether loading of grid or editing is wrong or not. So the part of afterSubmit where you use return [false, response.responseText] will probably never work. On the other side I would recommend you to use loadError callback in every grid. See the answer or details. Additionally you can consider to return JSON data from the controller in case of errors too. See HandleJsonExceptionAttribute definition and usage of [HandleJsonException] in the old answer. To process JSON error in case of editing you will need to use errorTextFormat callback of form editing.

 
精彩推荐
图片推荐