Sending a JSON object to an ASP.NET web service using JQUERY ajax function

Question

I want to create object on the client side of aspx page. And i want to add functions to these javascript classes to make easier the life.

Actually i can get and use the objects (derived from the server side classes) which returns from the services. When i wanted to send objects from the client by jquery ajax methods, i couldn't do it :)

This is my javascript classes:

function ClassAndMark(_mark, _lesson){
 this.Lesson = _lesson;
 this.Mark = _mark;
}
function Student(_name, _surname, _classAndMark){
 this.Name = _name;
 this.SurName = _surname;
 this.ClassAndMark = _classAndMark;
}

And this is a method for Student class to call Web Service:

JSClass.prototype.fSaveToDB(){
 $.ajax({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 url: "/WS/SaveObject.asmx/fSaveToDB"),
 data: ????????????,
 // This might be: JSON.stringify(this) ?
 // Web service method has a parameter, name is _obj 
 // if i don't send data with parameter, i'm getting this error:
 // Invalid web service call, missing value for parameter: '_obj'
 //
 // Should i send it like that:
 // data: "{_obj:" + JSON.stringify(this) + "}"
 // 
 // I tried to wrap this with parameter like that: 
 // data: JSON.stringify("{_obj:" + this + "}") 
 // 
 // But i got this error:
 // Cannot convert object of type 'System.String' to type 'System.Collections.Generic.IDictionary`2[System.String,System.Object]'
 dataType: "json"
 });
}

To create javascript object and call its method to send it toward web service:

Actually i don't know what should be definition of classes and methods on the Server side but i think:

class ClassAndMark{
 public string Lesson ;
 public string Mark ;
}
class Student{
 public string Name ;
 public string SurName ;
 public ClassAndMark classAndMark ;
}

Web service is below but again i couldn't get what should be instead of the ???? :

[WebMethod()]
public Student fSaveToDB(???? _obj)
{
 // How can i convert input parameter/parameters 
 // of method in the server side object? 
 // SQL operations 
 // srting QInsert = "INSERT INTO tableName (......) VALUES (.....)";
 // ...
 // ..
 // .
 return new Student{
 Name = ???, // deserialize _obj and pass its Name value
 SurName = ???, // deserialize _obj and pass its SurName value
 classAndMark = ???, // deserialize _obj and pass its classAndMark value
 };
}

Answer 1

Step 1, client side: You have to serialize your client objects into JSON, I personally use stringify() method of the JSON2 library: http://www.json.org/js.html

data: JSON.stringify(myObj)

Step2, Server-side: You have to translate the serialized object into something "eatable" by your c# code. Here you can use deserialize() method of Microsoft's JavaScriptSerializer class (but it might have some issues in .net 3.5 if you don't have SP installed), or otherwise JSON.net library http://james.newtonking.com/pages/json-net.aspx

server-side method signature should be:

fSaveToDB(Object myObj)

where "myObj" is the name of your client-side object container:

{myObj: your object...}

• uzay95: this doesn't work "data: JSON.stringify(myObj)" because web service method has parameter name and it is giving error like "you didn't call me with this parameter"...
• mamoo: Have you tried to wrap your object as I wrote in the last line? Like this: data: JSON.stringify({ paramName: myObj })
• uzay95: I tried and got this error : Cannot convert object of type 'System.String' to type 'System.Collections.Generic.IDictionary`2[System.String,System.Object]' Do you have any idea ? And thank you for your helps...
• mamoo: Could you please post the server method complete signature?

Answer 2

Is your asmx page expecting a soap envelope? If so you will have a tough time connecting directly to it with an xmlhttp request do to the additional markup (it's certainly do-able, but is a pain). You may want to look at some examples of creating restful services as they will be easier to communicate with via javascript. Take a look at http://www.west-wind.com/weblog/posts/324917.aspx.

Answer 3

Javascript side:

JSClass.prototype.fSaveToDB(){
 $.ajax({
 type: "POST",
 contentType: "application/json; charset=utf-8",
 url: "/WS/SaveObject.asmx/fSaveToDB"),
 data: data: $.toJSON({ _obj: this }),
 dataType: "json"
 });
}

Web service is:

[WebMethod()]
public Student fSaveToDB(Student _obj)
{
 return bla bla bla;
}

• MC9000: No such function in jQuery - what version are you using? Uncaught TypeError: $.toJSON is not a function

Answer 4

A detailed answer for a similar question states that combining the JQuery & Json2.stringfy() can be used for sending complex type to Server-Side methods.

And on the Server Side, you will only need to put the required Type in the Method Signature (ex. foo(MyType obj) { ... } )

How to send JSON object to asp.net web service and process the data there?

Answer 5

Let's simplify this: You have a server side object instance name and a client side object instance name.

In your jQuery ajax - use this form

data: '{"myServerSideObjectInstanceName":' + JSON.stringify(myClientSideObjectInstanceName) + '}',

On the server side use

public void MyWebServiceMethod(myObject myServerSideObjectInstanceName)
{ ... your code here ...}

As long as the myObject has the identical signature as your javascript Object, this will work. You can get your values (on the server) using something like myServerSideObjectInstanceName.StudentName (or whatever).