0

I seem to have a problem with the setup of my web service when trying to save row data from my jqGrid. The data comes back fine; the grid loads the data fine and the edit box displays fine when I click the pencil. I've checked the Request body using IE Developer tools and it shows data like: Step_Number=1&oper=edit&id=1 I know there is something missing in the way I've got this method setup and the way it's called but I can't for the life of me find the answers I'm looking for.

What do I need to format the data into JSON and send it and what do I have to have on my .Net method to accept the data?

Thank you for any help you can provide.

[WebInvoke(Method = "POST", UriTemplate = "/Save/JSA", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateRecord()
{}

**Update** This is the one that works
[WebInvoke(Method = "POST", UriTemplate = "/Save/JSA", BodyStyle = WebMessageBodyStyle.Wrapped,  RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSA(string Step_Number, string Step_Description, string oper, string id)
{}

When I use the above, the function works but I get no data. The second I put a parameter, my code just seems to break. Here is my jqGrid code that I'm using:

$.getJSON('FileServices/Get/JSA/' + id, function (data) {
$("#list").jqGrid({
    url: 'FileServices/GetList/JSA',
    cellEdit: true,
    editurl: 'FileServices/Save/JSA',
    //serializeRowData: function (data) { return JSON.stringify(data); },
    datatype: 'local',
    gridComplete: function () {
            $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
    },
    onSelectRow: function (rowid, status) {
    },
    loadComplete: function (data) {
            var det = $("#details");
            $("#list").setGridWidth(det.width() - 18, true);
    },
    colNames: ['Id', 'Step Number', 'Step Description'],
    colModel: [
      { name: 'Id', 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="white-space: normal; vertical-align: top;' } },
      { name: 'Step_Description', index: 'Step_Description', sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } }
    ],
    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: ''
});

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: 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]);
}

thegrid.navGrid("#pager");
});
DrZ
  • 181
  • 5
  • 22

1 Answers1

1

You posted not all code which is required. You wrote "when I click the pencil" so I suppose that you use navGrid somewhere, but how and with which parameters?... In any way you set jQuery.jgrid.edit in the wrong way. The code should looks about the following:

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    serializeEditData: function (postData) {
        return JSON.stringify(postData);
    }
});
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you Oleg. I made your change and I get {"Step_Number":"1","oper":"edit","id":"1"}. At least it's in JSON format now. But I'm still having problems with the call to UpdateRecord. If I try UpdateRecord(string data) I get an error 400. What am I missing that is preventing the data to be referenced in the UpdateRecord method? Thank you again Oleg. – DrZ Sep 14 '11 at 21:39
  • @DrZ: which names you get for parameters of `UpdateRecord` which you call. It should be the it is important *which name* has the parameters. Another parameter `BodyStyle` can be also critical. Try to remove it or to use `WebMessageBodyStyle.WrappedResponse`. I recommend you to look at [the answer](http://stackoverflow.com/questions/3917102/jqgrid-add-row-and-send-data-to-webservice-for-insert/3918615#3918615) and [this one](http://stackoverflow.com/questions/5497412/consuming-json-in-wcf-service-method/5498450#5498450) (the last one only for understanding the meaning of `BodyStyle`). – Oleg Sep 14 '11 at 21:46
  • @DrZ: i hope you found also that you should not use `$.getJSON` and especially `addRowData` to fill the grid. The best is to use `ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }` (see [here](http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542) and [here](http://stackoverflow.com/questions/4029909/load-data-from-webservice-asmx-to-jqgrid-please-help-me/4031603#4031603)) – Oleg Sep 14 '11 at 22:03
  • Thank you Oleg. By changing the BodyStyle to WebMessageBodyStyle.Wrapped, and by providing a parameter for each of my editable fields, and the oper and id, the code is now working. I updated the question to reflect the changes and code that works. – DrZ Sep 14 '11 at 22:12
  • @DrZ: You are welcome! In any way I recommend you to change the way how you fill the grid (see my previous comment). The absolute minimal changes are to add `data: data.details` parameter instead of the usage of `addRowData` in the loop. – Oleg Sep 14 '11 at 22:18
  • I will take a look at what you suggest. Please don't be surprised if you see my comment on the site again ;) Thanks again Oleg. I really appreciate you taking the time to help! – DrZ Sep 14 '11 at 23:07