Calling asmx with class array from jQuery ajax

Question

I have a WebMethod with the following signature:

[WebMethod]
    public void SaveRoute(int id, Coordinates[] coordinates)
    {
    }

Where Coordinates is:

/// <summary>
/// A position on the globe
/// </summary>
public class Coordinates
{
    public decimal Longitude { get; protected set; }
    public decimal Latitude { get; protected set; }

    public Coordinates(decimal latitude, decimal longitude)
    {
        this.Longitude = longitude;
        this.Latitude = latitude;
    }
}

I want to call this from a jQuery ajax method like this one:

$.ajax({
                    type: "POST",
                    url: "Routes.asmx/SaveRoute",
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    data: '{"id":1, ,"coordinates": "Longitude":123,"Latitude":456}',
                    dataType: "json",
                    success: handleHtml,
                    error: ajaxFailed
                });

What would I have to supply in the data property for a correct deserialisation?

I have now solved it:

Thanks for all the help, I eventually managed to get what I wanted with the following code:

var coords = new Array();
            for (ckey in flightPlanCoordinates) {
                var thisWaypoint = { "Longitude": flightPlanCoordinates[ckey].lng(), "Latitude": flightPlanCoordinates[ckey].lat() };
                coords.push(thisWaypoint);
            }
            var data = { "id": 1, "coordinates": coords };
            if (flightPlanCoordinates) {

                $.ajax({
                    type: "POST",
                    url: "Routes.asmx/SaveRoute",
                    cache: false,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(data),
                    dataType: "json",
                    success: handleHtml,
                    error: ajaxFailed
                });
            }

I reverse engineered the JSON by sending some down with another method:

[WebMethod]
    public Coordinates[] Get()
    {
        return new Coordinates[]
        {
            new Coordinates(123, 456),
            new Coordinates(789, 741)
        };
    }

It is also important that you have a public parameterless constructor in your class and your property's setters are public:

/// <summary>
/// A position on the globe
/// </summary>
public class Coordinates
{
    public decimal Longitude { get; set; }
    public decimal Latitude { get; set; }

    public Coordinates()
    {
    }

    public Coordinates(decimal latitude, decimal longitude)
    {
        this.Longitude = longitude;
        this.Latitude = latitude;
    }
}

Hans · Accepted Answer · 2011-08-18 19:59:15Z

3

I recommend using JSON.stringify to build your "JSON" strings. With JSON.stringify you can convert a array of coordinates to a JSON string representation. Example:

var id = 2;
var coords = new Array();

coords[0] = { Longitude: 40.0, Latitude: 76.0 };
coords[1] = { Longitude: 42.0, Latitude: 77.0 };

$.ajax({
    type: "POST",
    url: "Routes.asmx/SaveRoute",
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: '{ "id":' + JSON.stringify(id) + ', "coordinates":' + JSON.stringify(coords) + '}',
    dataType: "json",
    success: handleHtml,
    error: ajaxFailed });

If you place your SaveRoute web method on a aspx website you can use ScriptManager to generate page methods and script types (see MSDN documentation for GenerateScriptTypeAttribute).

answered Aug 18, 2011 at 19:59

Hans

13.2k2 gold badges60 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph Silber · Accepted Answer · 2011-08-18 19:24:00Z

1

Provide it as an object, not a string:

$.ajax({
    type: "POST",
    url: "Routes.asmx/SaveRoute",
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: {"id":1, "coordinates": ["Longitude":123, "Latitude":456]},
    dataType: "json",
    success: handleHtml,
    error: ajaxFailed
});

answered Aug 18, 2011 at 19:24

Joseph Silber

221k59 gold badges369 silver badges293 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-08-18 19:24:14Z

0

Since coordinates is an array try this

data: '{ "id":1, ,"coordinates": [ {"Longitude":123,"Latitude":456} ] }'

For a more complex objects you can use JSON binder from the below link

http://community.codesmithtools.com/CodeSmith_Community/b/tdupont/archive/2009/08/10/mvc-custom-json-binder.aspx

answered Aug 18, 2011 at 19:24

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

Calling asmx with class array from jQuery ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related