KendoUI DataSource results in Invalid JSON Primitive

Question

So I've been beating my head against the wall for a day or so trying to get this to work. if it's simple and stupid - sorry and thanks. It's pretty long post as I'm trying to describe everything I've done thus far.

So I have a ASMX web service that I would like to use to populate a Kendo UI listview. This works perfectly until I add the data: to my transport request. So my web service looks like this now:

WebMethod(Description = "Return All Pending Actions Based")]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public PendingActionResult GetPendingActions(string sUsername, string sPassword, string sUserID, string sClubID)
{
   //code is here;
}

And my full dataSource looks like this:

dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "POST",
                        data:  "{'sUsername':'admin@mail.com','sPassword':'13123','sUserID':'1539','sClubID':'1'}",
                        url: "http://sdk.domain.com/services/general.asmx/GetPendingActions",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
                schema: {
                        data: "d.Data", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                        total: "d.Total",
                        model: {
                            id: "activityID",
                            fields: {
                                activityID: { type: "number", validation: {min: 1, required: true } },
                                taskName: { type: "string" },
                                taskNote: { type: "string" },
                                openDate: { type: "datetime" },
                                dueDate: { type: "datetime" },
                                priority: { type: "number" },
                                statusID: { type: "number" },
                                openedByID: { type: "number" },
                                assignedToID: { type: "number" },
                                statusName: { type: "string" },
                                complete: { type: "bool" }
                            }
                        }
                    }
            });

            that.set("pendingActionsDataSource", dataSource);

The error I get back is:

{"Message":"InvalidJSONprimitive:"\u00261={\u00262=\u0027\u00263=s\u00264=U\u00265=s\u00266=e\u00267=r\u00268=n\u00269=a\u002610=m\u002611=e\u002612=\u0027\u002613=:\u002614=\u0027\u002615=a\u002616=d\u002617=m\u002618=i\u002619=n\u002620=@\u002621=m\u002622=a\u002623=i\u002624=l\u002625=.\u002626=c\u002627=o\u002628=m\u002629=\u0027\u002630=,\u002631=\u0027\u002632=s\u002633=P\u002634=a\u002635=s\u002636=s\u002637=w\u002638=o\u002639=r\u002640=d\u002641=\u0027\u002642=:\u002643=\u0027\u002644=1\u002645=3\u002646=1\u002647=2\u002648=3\u002649=\u0027\u002650=,\u002651=\u0027\u002652=s\u002653=U\u002654=s\u002655=e\u002656=r\u002657=I\u002658=D\u002659=\u0027\u002660=:\u002661=\u0027\u002662=1\u002663=5\u002664=3\u002665=9\u002666=\u0027\u002667=,\u002668=\u0027\u002669=s\u002670=C\u002671=l\u002672=u\u002673=b\u002674=I\u002675=D\u002676=\u0027\u002677=:\u002678=\u0027\u002679=1\u002680=\u0027\u002681=}\u002682=".","StackTrace":"atSystem.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(Stringinput,Int32depthLimit,JavaScriptSerializerserializer)\r\natSystem.Web.Script.Serialization.JavaScriptSerializer.DeserializeT\r\natSystem.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContextcontext,WebServiceMethodDatamethodData)","ExceptionType":"System.ArgumentException"}

So I started searching high and low for anything that was similar and found other people missing a ' or a " in the data request so I tried a ton of different variations of it, tried using JSON.stringify but the error continued. So I went to fiddler to see what was being sent to the server and here is my problem. Junk is being sent. Fiddler shows this in TextView being sent to the server:

0=%7B&1='&2=s&3=U&4=s&5=e&6=r&7=n&8=a&9=m&10=e&11='&12=%3A&13='&14=a&15=d&16=m&17=i&18=n&19=%40&20=m&21=a&22=i&23=l&24=.&25=c&26=o&27=m&28='&29=%2C&30='&31=s&32=P&33=a&34=s&35=s&36=w&37=o&38=r&39=d&40='&41=%3A&42='&43=1&44=3&45=1&46=2&47=3&48='&49=%2C&50='&51=s&52=U&53=s&54=e&55=r&56=I&57=D&58='&59=%3A&60='&61=1&62=5&63=3&64=9&65='&66=%2C&67='&68=s&69=C&70=l&71=u&72=b&73=I&74=D&75='&76=%3A&77='&78=1&79='&80=%7D

(I'll post a picture online of this so it's a little easier to see)

So here I can clearly see that the string isn't being sent in the correct format. So I decided to give this a go without using Kendo dataSource but instead just use JSON/AJAX. So I typed this up:

function getPAs() {
    $.ajax({
    type: "POST",
    url: "http://sdk.domain.com/services/general.asmx/GetPendingActions",
    data:  "{'sUsername':'admin@mail.com','sPassword':'13123','sUserID':'1539','sClubID':'1'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: getPAs_Success,
    error: app.onError
    });
}

function getPAs_Success(data, status) {
    console.log("START getPAs_Success");

    var cars = data.d;
    var sout = document.getElementById('nav');
    var output = "";
    $.each(cars, function(index, car) {
    output += '<p><strong>' + car.taskName + ' ' +
                            car.taskNote + '</strong><br /> Priority: ' +
                            car.priority + '<br />Status: ' +
                            car.statusID + '<br />Opened By: ' +
                            car.openedByID + '<br />Assigned To' +
                            car.assignedToID + '</p>';
    });
    sout.innerHTML = output;
    console.log("END getPAs_Success");
}

And if I look at fiddler in TextView I see this being sent to the server:

{'sUsername':'admin@mail.com','sPassword':'13123','sUserID':'1539','sClubID':'1'}

And I clearly see my JSON results in fiddler as well.

So my question is after all of that:

Is there something special I need to be doing with the Kendo UI Datasource in order to pull this off? If it matters, I'm using Icenium and trying to build a quick mobile app for fun.

Thanks,

Richard

UPDATE #1 Tried both and no further.

data: {"sUsername":"admin@mail.com","sPassword":"13123","sUserID":"1539","sClubID":"1"},

which validates using jsonlint.com but when I look at fiddler now I see this being sent to the server:

sUsername=admin%40mail.com&sPassword=13123&sUserID=1539&sClubID=1

So maybe it's because I don't have quotes around the data now so I tried this:

data: '{"sUsername":"admin@mail.com","sPassword":"13123","sUserID":"1539","sClubID":"1"}',

and when I do that I get same mess of 0=%7... like above.

When I try to use toJSON I get an object function has no method. Doing something like this:

var jsPost = $.toJSON({
                sUsername: "admin@mail.com",
                sPassword: "13123",
                sUserID: "1539",
                sClubID: "1"
            });

Found someone on the telerik forums which said not to use toJSON and instead use JSON.stringify so I tried this:

var jsPost = {
                sUsername: "admin@mail.com",
                sPassword: "13123",
                sUserID: "1539",
                sClubID: "1"
            };

...

data: JSON.stringify(jsPost),

But still results in the crazy garbage.

Answer 1

A valid JSON format needs double quotes, instead of single. You can try validating your string in services like http://jsonlint.com/ . Even better, you can use toJson on an object instead of building it manually.