Problem with passing object to server with jQuery.Ajax()

Question

Hi,

I am trying to implement the same code that was mentioned in this question

Currently I have the following code:

var pagePath = window.location.pathname;

var paramList = '';
if (paramArray.length > 0) {
 for (var i = 0; i < paramArray.length; i ++) {
  if (paramList.length > 0) paramList += ',';
  paramList += "{'id':'" + paramArray[i].id + "', 
                       'collapsed':'" + paramArray[i].collapsed + "', 
                       'order':'" + paramArray[i].order + "', 
                       'column':'" + paramArray[i].column + "'}";
 }
}
paramList = '[' + paramList + ']';

$.ajaxSetup({ cache: false });
//Call the page method  
$.ajax({
 type: "POST",
 url: pagePath + "/" + fn,
 contentType: "application/json; charset=utf-8",
 data: "{'items': **'**" + $.toJSON(paramList) + "**'**}",

dataType: "json", success: successFn, error: errorFn });

I am trying to pass this data to the WebMethod

[WebMethod]
public static String SaveData(Dictionary<String, Object>[] items)

The problem is that I keep receiving the error "500 Internal Server Error". I'm pretty sure that the data type is causing the problem but just can't figure it out. Any ideas?

Answer 1

Is your service decorated with [ScriptService] attribute?

and what's up with the asterisks? is this some new macro i didn't get the memo on?

"{'items': **'**" + $.toJSON(paramList) + "**'**}"

try

"{'items': " + $.toJSON(paramList) + "}"

As i see it, you are already creating json. no need for the toJSON

try replacing the single quotes with double quotes. e.g.

'{"items": ' + paramList + '}'

your post data should look like this

'{
    "items": [{
        "id": "1",
        "collapsed": "0",
        "order": "0",
        "column": "column2"
    },
    {
        "id": "2",
        "collapsed": "1",
        "order": "1",
        "column": "column2"
    },
    {
        "id": "3",
        "collapsed": "0",
        "order": "0",
        "column": "column3"
    }]
}'

inline

'{ "items": [{ "id": "1", "collapsed": "0", "order": "0", "column": "column2" }, { "id": "2", "collapsed": "1", "order": "1", "column": "column2" }, { "id": "3", "collapsed": "0", "order": "0", "column": "column3" }]}'



var paramList = "";
if (paramArray.length > 0) {
 for (var i = 0; i < paramArray.length; i ++) {
  if (paramList.length > 0) paramList += ",";
  paramList += '{"id":"' + paramArray[i].id + '", 
                       "collapsed":"' + paramArray[i].collapsed + '", 
                       "order":"' + paramArray[i].order + '", 
                       "column":"' + paramArray[i].column + '"}';
 }
}
paramList = "[" + paramList + "]";

$.ajaxSetup({ cache: false });
//Call the page method  
$.ajax({
 type: 'POST',
 url: pagePath + '/' + fn,
 contentType: 'application/json; charset=utf-8',
 data: '{"items":' + paramList + '}',  // the rest of your function is missing