I am trying to learn JSON and jQuery and before I delve into anything too complex I thought I would try a simple example to get me up to speed.

I have a button that when clicked I would like to pass a JSON object through to a WebMethod, perform some string operations on it and return to the client side.

However when I click the button nothing happens, the browser console shows the following error:

POST http://localhost:53388/myfolder/foo/aspx/setrecord 500 (Internal Server Error)

Any help will be greatly appreciated

jQuery

$('#SaveButton').click(function () {
    var jsonObj = { "data":[{ "id": 1, "name": "Zippy" }, { "id": 2, "name": "George" }, { "id": 3, "name": "Bungle" }, { "id": 4, "name": "geoffrey"}] }
    jsonObj = JSON.stringify(jsonObj);
    SaveNewOrder(jsonObj);
})

function SaveNewOrder(jsonObj) {
    $.ajax({
        type: "POST",
        url: "foo.aspx/setrecord",
        data: jsonObj,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    $('#OutputDiv').html(response.d);
}

Classes and WebMethod

public class ListOfDestinationColumns
{
    public List<DestinationColumn> data { get; set; }
}

public class DestinationColumn
{

    public int id { get; set; }
    public string name { get; set; }
}

[WebMethod]
public static string setrecord(string jsonObj)
{
    ListOfDestinationColumns Destinations = new JavaScriptSerializer().Deserialize<ListOfDestinationColumns>(jsonObj);

    string output = "Start<br/>";
    foreach (var item in Destinations.data)
    {
        output += string.Format("id: {0}, name: {1}<br />", item.id.ToString(), item.name);
    }
    output += "End";
    return output;
}