如何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.

我有一个jqGrid，它是通过调用返回JSON的web方法来填充的.我们在那里很好.我将导航器用于添加"按钮，并使用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.

单击添加"按钮时会出现对话框，并且可以填写所有内容.但是，单击提交"按钮后会出现error Status: 'Internal Server Error'. Error code: 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-Globals

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')

注意:我开始通过datatype: function(data)使用$.ajax()进行填充，但我想我会回到最简单的示例来使其工作.如果您想就使用$.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屋！