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...}

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;
}