如何json化“添加"jqGrid的帖子/参数 [英] How to jsonify "Add" post/parameters for jqGrid

问题描述

这个要了我的命.我已经阅读了很多 Oleg 的评论，并通过 文档，但我认为我忽略了一些东西真的简单.

This one's killing me. I've read through a lot of Oleg's comments, and through the documentation, but I think I'm overlooking something really simple.

我通过调用返回 JSON 的 web 方法填充了一个 jqGrid.我们在那里很好.我将导航器用于添加"按钮，并使用 onSelectRow w/jqGrid.editRow() 进行编辑.

I have a jqGrid populated by calling a webmethod that returns JSON. We're good there. I'm using the Navigator for my "Add" button, and using onSelectRow w/ jqGrid.editRow() for my editing.

单击添加"按钮时出现对话框，可以填写所有内容.但是，我得到 错误状态:内部服务器错误".错误代码:500 点击提交按钮后返回消息.使用 Firebug，Response 是 {"Message":"Invalid JSON primitive: FileType.","StackTrace":.....Post 是 FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

I get the dialog box when clicking the "Add" button, and can fill everything in. However, I get a error Status: 'Internal Server Error'. Error code: 500 return message after clicking the Submit button. Using Firebug, the Response is {"Message":"Invalid JSON primitive: FileType.","StackTrace":..... and the Post is FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

显然，我的帖子没有得到jsonified".我曾尝试使用 serializeEditData 和 beforeSubmit 来尝试手动返回 JSON.stringify(eparams);，但没有任何效果.请在下面查看我的代码.

Obviously, my post is not getting "jsonified". I have tried using serializeEditData, and beforeSubmit in an attempt to manually return JSON.stringify(eparams);, but nothing has worked. Please see my code below.

网络方法

<WebMethod()> _
<ScriptMethod()> _
Public Sub ModifyFileLog(ByVal FileType As String, _
  ByVal ExportDate As Nullable(Of Date), _
  ByVal oper As String, ByVal id As String)
    Try
        ' blah
    Catch ex As Exception
        Throw New Exception(ex.Message)
    End Try
End Sub

JS - 全局

jQuery.extend(
    jQuery.jgrid.defaults, {
        type: "POST",
        mtype: "POST",
        datatype: "json",
        ajaxGridOptions: { contentType: "application/json" },
        ajaxRowOptions: { contentType: "application/json" },
        rowNum: 10,
        rowList: [10, 20, 30],
        serializeGridData: function(data) {
            return JSON.stringify(data);
        },
        gridview: true,
        viewrecords: true,
        sortorder: "asc"
    },
    jQuery.jgrid.edit, {
        ajaxEditOptions: { contentType: "application/json" },
        recreateForm: true,
        serializeEditData: function(postData) {
            return JSON.stringify(postData);
        }
    }
);

JS - jqGrid

var tblName = "tblFiles";
var pager1 = '#pagerFiles';
var grid = $("#" + tblName);
grid.jqGrid({
    url: 'WebService.asmx/GetFileLog',
    colNames: ['ID', 'File Type', 'Report Date', 'Export Date', 'EE Count'],
    ajaxGridOptions: {
        success: function(data, textStatus) {
            if (textStatus == "success") {
                ReceivedClientData(JSON.parse(getMain(data)).rows, grid);  // populates grid
                endGridRequest(tblName);    // hides the loading panel
            }
        },
        error: function(data, textStatus) {
            alert(textStatus);
            alert('An error has occured retrieving data!');
        }
    },
    editurl: "WebService.asmx/ModifyFileLog",
    serializeEditData: function(postData) {
        return JSON.stringify(postData);
    },
    recreateForm: true,
    pager: pager1,
    ...
}); // end .jqGrid()
grid.jqGrid('navGrid', pager1, { add: true, del: false, edit: true, view: false, refresh: true, search: false },
    {}, // use default settings for edit
    {
        //beforeSubmit: submitAddFileLog,
        closeAfterAdd: false,
        closeAfterEdit: true
    }, // use default settings for add
    {},  // delete instead that del:false we need this
    {multipleSearch: false }, // enable the advanced searching
    {closeOnEscape: true} /* allow the view dialog to be closed when user press ESC key*/
); // end grid/jqGrid('navGrid')

注意:我开始使用 $.ajax() 通过 datatype: function(data) 进行填充，但我想我会回到最简单的示例让它工作.如果您愿意就使用 $.ajax() 相对于简单地使用 grid.jqGrid({ url: blah }); 的优势提出您的想法，我很乐意了解更多.否则，请让我知道将其作为单独的问题发布是否更合适.

NOTE: I started out populating by using $.ajax() by way of datatype: function(data), but thought I would return to the simplest example to get this to work. If you care to offer your thoughts on the advantages of using $.ajax() over simply using grid.jqGrid({ url: blah });, I'd love to learn more. Otherwise, please let me know if it would be more appropriate to post it as a separate question.

另外，如果我只是以错误的方式执行此操作，请告诉我.我不拘泥于任何一种方法来完成这项工作.我宁愿犯错并学习如何以正确的方式做到这一点，而不是在自己的脑海中保持正确"并继续破解自己的方式.

Also, please let me know if I'm just flat out doing this the wrong way. I'm not locked in to any one way of getting this done. I would prefer to be wrong and to learn how to do this the right way, than to be "right" in my own mind and continue to hack my way through it.

任何帮助，连同示例，将不胜感激.

Any help, along w/ examples, would be hugely appreciated.

推荐答案

在我看来，您的主要问题在于 JS - Globals.您以错误的方式使用 jQuery.extend 函数.你应该换一个电话

In my opinion your main problem is in JS - Globals. You use jQuery.extend function in a wrong way. You should replace one call

jQuery.extend(
    jQuery.jgrid.defaults, {
        // ...
    },
    jQuery.jgrid.edit, {
        // ...
    }
);

两个单独的调用:

jQuery.extend(
    jQuery.jgrid.defaults, {
        // ...
    }
);
jQuery.extend(
    jQuery.jgrid.edit, {
        // ...
    }
);

之后对服务器的编辑请求将是 {"FileType":3,"ExportDate"="12/29/2010","oper":"add","id":"_empty"} 而不是 FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

After that the edit request to the server will be {"FileType":3,"ExportDate"="12/29/2010","oper":"add","id":"_empty"} instead of FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

接下来，我不确定您是否可以将 ExportDate 用作 Date (DateTime ???) 类型.可能你应该从 String 类型开始，然后将输入数据转换为你需要的数据类型.

Next, I am not sure that you can use ExportDate as a Date (DateTime ???) type. Probably you should start with String type and then convert the input data to the datatype which you need.

下一句.确保 ModifyFileLog 返回 JSON 数据.例如，您可以使用 <ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> 代替 <ScriptMethod()>.如果您使用 .NET 4.0，您可以通过许多其他方式实现相同的目标.

Next remark. Be sure that ModifyFileLog return JSON data. For example you can use <ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> instead of <ScriptMethod()>. If you use .NET 4.0 you can achieve the same in many other ways.

还有一件事.ModifyFileLog 应该是 Function 而不是 Sub 并返回新添加对象的 Id.在编辑或删除操作的情况下，返回值将被忽略.

One more thing. The ModifyFileLog should be Function instead of Sub and return the Id of new added object. In case of edit or del operations the return value will be ignored.

因为 ModifyFileLog Function 将返回 JSON 数据，您必须对其进行解码/解析.您几乎可以按照我在此处所述的方式执行此操作.对于 ASMX Web 服务，您可以执行以下操作:

Because ModifyFileLog Function will be returned JSON data you have to decode/parse it. You can do this almost in the same way which I described here. In case of ASMX web service you can do about following:

jQuery.extend(
    jQuery.jgrid.edit, {
        ajaxEditOptions: { contentType: "application/json" },
        recreateForm: true,
        serializeEditData: function(postData) {
            return JSON.stringify(postData);
        },
        afterSubmit: function (response, postdata) {
            var res = jQuery.parseJSON(response.responseText);
            return [true, "", res.d];
        }
    }
);

这篇关于如何json化“添加"jqGrid的帖子/参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！