Как jsonify "Добавить" сообщение / параметры для jqGrid

Question

Это меня убивает. Я прочитал много комментариев Олега и документацию , но мне кажется, что я что-то упускаю действительно просто.

У меня есть jqGrid, заполненный вызовом веб-метода, который возвращает JSON. Нам там хорошо. Я использую Навигатор для своей кнопки «Добавить» и использую onSelectRow w / jqGrid.editRow() для своего редактирования.

Я получаю диалоговое окно при нажатии кнопки «Добавить» и могу заполнить все. Однако я получаю сообщение error Status: 'Internal Server Error'. Error code: 500 return после нажатия кнопки «Отправить». Используя Firebug, Response это {"Message":"Invalid JSON primitive: FileType.","StackTrace":..... и Post является FileType=3&ExportDate=12%2F29%2F2010&oper=add&id=_empty.

Очевидно, мой пост не становится "jsonified". Я пытался использовать serializeEditData и beforeSubmit в попытке вручную вернуть JSON.stringify(eparams);, но ничего не помогло. Пожалуйста, смотрите мой код ниже.

WebMethod

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

ПРИМЕЧАНИЕ: я начал заполнять, используя $.ajax() с помощью datatype: function(data), но подумал, что вернусь к простейшему примеру, чтобы заставить это работать. Если вы хотите высказать свои соображения о преимуществах использования $.ajax() по сравнению с простым использованием grid.jqGrid({ url: blah });, я хотел бы узнать больше. В противном случае, пожалуйста, дайте мне знать, будет ли уместнее опубликовать его как отдельный вопрос.

Кроме того, пожалуйста, дайте мне знать, если я просто сделаю это неправильно. Я не привязан ни к какому способу сделать это. Я предпочел бы быть неправым и научиться делать это правильно, чем быть «правильным» в своем собственном уме и продолжать взламывать мой путь через это.

Любая помощь, наряду с примерами, будет очень признательна.

Answer 1

На мой взгляд, ваша главная проблема в JS - Globals . Вы используете jQuery.extend неправильно. Вам следует заменить один звонок

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.

Далее, я не уверен, что вы можете использовать ExportDate как тип Date (DateTime ???). Возможно, вам следует начать с типа String, а затем преобразовать входные данные в нужный вам тип данных.

Следующее замечание. Убедитесь, что ModifyFileLog возвращает данные JSON. Например, вы можете использовать <ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> вместо <ScriptMethod()>. Если вы используете .NET 4.0, вы можете добиться того же во многих других отношениях.

Еще одна вещь. ModifyFileLog должно быть Function вместо Sub и возвращать Id нового добавленного объекта. В случае операций редактирования или удаления возвращаемое значение будет игнорироваться.

Поскольку ModifyFileLog Function будут возвращены данные JSON, вы должны декодировать / проанализировать их. Вы можете сделать это почти так же, как я описал здесь . В случае веб-службы ASMX вы можете сделать следующее:

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];
        }
    }
);