Trouble passing JSON to a Web service

Question

I have an object that looks like the following:

{
    "json": [{
        "Contract": "....", 
        "SupervisorID": "..."
    },{
        "Contract": "...", 
        "SupervisorID": "..."
    }]
}

The Object above is built like this. I get the selected checkboxes and add their IDs to a array of objects.

var jsonArr = [];
    var sps = $('#measuresUnApprovedModal').find('[name="chkbox_op"] input[type="checkbox"]:checked');
    sps.each(function (i) {
        var id = $(this).attr("id");
        var idParts = id.split("_");
        jsonArr.push({
            "Contract": idParts[1],
            "SupervisorID" : idParts[2]
        });
    });

How can I get those values on the server end? My Current attempt looks like this:

$.ajax({
        type: "POST",
        url: "[REMOVED]",
        data: { json: jsonArr },
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (msg) {
        if (msg.d) {
            alert("Success");
        }
        else { alert("Error has occured."); }
    }).fail(function () {
        alert("An unexpected error has occurred during processing.");
    });

And the Web service:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
 public string SendEmail(List<SupervisorToEmail> json)
    {
        return "Hi";
    }
}

public class SupervisorToEmail
{
    public string Contract { get; set; }
    public string SupervisorID { get; set; }
}

public class Supervisors
{
    private List<SupervisorToEmail> SupervisorsToEmail { get; set; }
}

Answer 1

I think the issue is in your ajax request, you need to pass jQuery a JSON string for the data parameter, not a JavaScript object, so that jQuery doesn't attempt to URLEncode your data.

This should work:

 $.ajax({ url: "[REMOVED]", type: "POST", data: JSON.stringify({ json: jsonArr }), contentType: "application/json; charset=utf-8", dataType: "json" }).done(function (msg) { if (msg.d) { alert("Success"); } else { alert("Error has occured."); } }).fail(function () { alert("An unexpected error has occurred during processing."); }); 

Answer 2

Not sure what ive done, but the following is the resultant code:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string SendEmail(List<SupervisorToEmail> Supervisors)
{
    foreach (SupervisorToEmail supervisor in Supervisors)
    {
    }
    return null;
}

public class SupervisorToEmail
{
    public string Contract { get; set; }
    public string SupervisorID { get; set; }
}

And the Jquery:

$('#btnSendUnApprovedEmail').click(function () {
        var jsonArr = new Array();
        var sps = $('#measuresUnApprovedModal').find('[name="chkbox_op"] input[type="checkbox"]:checked');
        sps.each(function (i) {
            var id = $(this).attr("id");
            var idParts = id.split("_");

            var obj = new Object();
            obj.Contract = idParts[1];
            obj.SupervisorID = idParts[2];
            jsonArr.push(obj);
        });
        var data = JSON.stringify(jsonArr);
        alert(data);
        $.ajax({
            type: "POST",
            url: "DailyMeasuresServiceHandler.asmx/SendEmail",
            data: JSON.stringify({ Supervisors : jsonArr}),
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        }).done(function (msg) {
            if (msg.d) {
                alert("Success");
            }
            else { alert("Error has occured."); }
        }).fail(function () {
            alert("An unexpected error has occurred during processing.");
        });
    });