Встроенное редактирование jqGrid "Ошибка запроса"

Question

Это продолжение этого вопроса У меня был ранее на этой неделе.

Мне удалось заставить функции редактирования формы работать просто отлично.Теперь я хотел сделать еще один шаг вперед и посмотреть, смогу ли я заставить работать встроенное редактирование.Я использовал код из примеров, который добавляет 3 кнопки;ES C. E) DIT и C) Ancel работает просто замечательно.Функция S) ave строка не делает.Можно ли использовать один и тот же код для редактирования формы для работы со встроенными изменениями?Или это один или другой?

Кажется, я нахожусь в той же лодке, на которой был мой первоначальный вопрос.Я могу видеть отправляемые данные, и они не в формате JSON.Это выглядит так: Id = 823 & Step_Number = 1 & Step_Description = xxx. & Oper = edit & id = 1 .Полученная ошибка выглядит следующим образом:

Сервер обнаружил ошибку при обработке запроса.Пожалуйста, смотрите страницу справки службы для построения действительных запросов к службе.Сообщение об исключении: «Входящее сообщение имеет неожиданный формат сообщения« Raw ».Ожидаемые форматы сообщений для операции: «Xml», «Json».Это может быть потому, что в привязке не настроен WebContentTypeMapper.См. Документацию WebContentTypeMapper для получения более подробной информации. '.Смотрите журналы сервера для более подробной информации.Трассировка стека исключений:

Я изучил ajaxRowOptions, но, похоже, это ничего не меняет.Это не значит, что я был в правильном положении.

[WebInvoke(Method = "POST", UriTemplate = "/Save/JSA", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSADetail(int Id, string Step_Number, string Step_Description, string oper, string id)

...
onclickSubmitLocal = function (options, postdata) {                    
},
editSettings = {
    recreateForm: true,
    width: 400,
    jqModal: false,
    reloadAfterSubmit: false,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true,
    onclickSubmit: onclickSubmitLocal
},
addSettings = {
    recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    savekey: [true, 13],
    closeOnEscape: true,
    closeAfterAdd: true,
    onclickSubmit: onclickSubmitLocal
};

$("#list").jqGrid({
    url: 'FileServices/GetList/JSA',
    edit: {
        mtype: "POST"
    },
    editurl: 'FileServices/Save/JSA',
    datatype: 'local',
    gridComplete: function () {
        var ids = jQuery("#list").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
            jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
        }

        $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        var det = $("#details");
        $("#list").setGridWidth(det.width() - 18, true);
    },
    colNames: ['Actions', 'Id', 'Step Number', 'Step Description', 'Hazards', 'Controls', 'Sequence'],
    colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'Id', editable: true, index: 'Id', width: 30, sortable: false, hidden: true },
      { name: 'Step_Number', editable: true, index: 'Step_Number', align: 'center', width: 50, fixed: true, resizable: false, sortable: false, title: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="font-weight: bold: true; white-space: normal; vertical-align: middle;' } },
      { name: 'Step_Description', editable: true, index: 'Step_Description', edittype: 'textarea', editoptions: { rows: '4', cols: '40' }, sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Hazards', index: 'Hazards', width: 200, sortable: false, formatter: JSAHazardFormatter, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Controls', index: 'Controls', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Sequence', index: 'Sequence', width: 0, sortable: false, hidden: true }
    ],
    pager: '#pager',
    rowNum: 5,
    rowList: [5, 10, 15, 20, 25, 30, 50],
    sortname: 'Id',
    height: 'auto',
    rownumbers: true,
    autowidth: true,
    forceFit: true,
    shrinkToFit: true,
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    hidegrid: false,
    caption: ''
}).navGrid("#pager", { add: false, edit: true, del: false, search: false }, editSettings, {}, {}, {}, {});

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    closeAfterEdit: true,
    closeOnEscape: true,
    serializeEditData: function (postData) {
        return JSON.stringify(postData);
    }
});

var thegrid = $("#list");

for (var i = 0; i < data.details.length; i++) {
    thegrid.addRowData(i + 1, data.details[i]);
}

Любая помощь с благодарностью.Огромное спасибо.

Answer 1

Вы можете использовать один и тот же код на стороне сервера как для встроенного редактирования, так и для редактирования форм. Использование ajaxRowOptions является правильным способом решения вашей проблемы. Он должен иметь как минимум contentType: "application/json". Попробуйте сделать следующее

$("#list").jqGrid({
    ... // you current parameters
    ajaxRowOptions: { contentType: "application/json" },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

или вы можете установить некоторые значения по умолчанию jqGrid с помощью

$.extend($.jgrid.defaults, {
    ajaxGridOptions: { contentType: "application/json" },
    ajaxRowOptions: { contentType: "application/json", type: "PUT", async: true },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

В том случае, если вам не нужно устанавливать одинаковые настройки в каждой сетке, которую вы используете.

Конечно, вы должны изменить значения по умолчанию до создания сетки. В настоящее время вы используете $.extend($.jgrid.edit, ... после создания сетки, которая также не очень хороша, но может выполнять работу. $.jgrid.defaults, который вы должны изменить любым способом перед созданием сетки. Обычно настройки всех настроек по умолчанию помещаются в отдельный файл JavaScript, который вы включили на всех своих страницах, использующих jqGrid.

Я рекомендовал вас в комментарии не используйте addRowData, которые заставляют ваш код работать медленно. Простая замена addRowData в цикле после сетки, уже созданной на дополнительный параметр data: data.details, улучшит производительность. Использование getDataIDs и цикла for для всех строк замедляет выполнение кода. Я рекомендую вам прочитать старый ответ , который описывает, как заполнять jqGrid данными, предоставленными службой WCF.

Вместо кнопок «E», «S», «C» вы можете использовать formatter: «actions» (см. этот старый ответ или другой ). Еще один старый ответ опишите другой подход к решению проблемы.