Sending KeyValuePair from AJAX to Wcf Service

Question

I use AJAX & WCF and I want to send an array of KeyValuePair:

Array that is in Service(that is in a particular class):

[DataMember]
public KeyValuePair<string, CustomDay>[] WorkDays { get; set; }

CustomDay.cs:

[DataContract]
public class CustomDay
{
    [DataMember]
    public CustomTime Start { get; set; }
    [DataMember]
    public CustomTime End { get; set; }
}

CustomTime.cs:

[DataContract]
public class CustomTime
{
    [DataMember]
    public int Hour { get; set; }
    [DataMember]
    public int Minute { get; set; }
}

I create the array in JavaScript by the following function:

function CreateWorkDaysDictonary() {

    var workdaysdic = new Object();

    if ($('#checkbox-sunday').is(':checked')) {
        var starttime = { Hour: $('#select-from-hour-sunday').val(),
            Minute: $('#select-from-minute-sunday').val()
        };
        var endtime = { Hour: $('#select-until-hour-sunday').val(),
            Minute: $('#select-until-minute-sunday').val()
        };
        workdaysdic["Sunday"] = { Start: starttime, End: endtime };
    }

    if ($('#checkbox-monday').is(':checked')) {
        var starttime = { Hour: $('#select-from-hour-monday').val(),
            Minute: $('#select-from-minute-monday').val()
        };
        var endtime = { Hour: $('#select-until-hour-monday').val(),
            Minute: $('#select-until-minute-monday').val()
        };
        workdaysdic["Monday"] = { Start: starttime, End: endtime };
    }

    //and so on...

    return workdaysdic;
}

Array created in JS:

enter image description here

But to WCF the array arrives without data:

enter image description here

I do not understand why this happens, I'll be happy with someone could help me.

I send the object to WCF as JSON:

enter image description here

When I try to create the object liks this:

function CreateWorkDaysDictonary() {

    var workdaysdic = new Array();

    if ($('#checkbox-sunday').is(':checked')) {
    var starttime = { Hour: $('#select-from-hour-sunday').val(),
        Minute: $('#select-from-minute-sunday').val()
    };
    var endtime = { Hour: $('#select-until-hour-sunday').val(),
        Minute: $('#select-until-minute-sunday').val()
    };
    workdaysdic[workdaysdic.length] = { "Sunday": { Start: starttime, End: endtime}};
}

if ($('#checkbox-monday').is(':checked')) {
    var starttime = { Hour: $('#select-from-hour-monday').val(),
        Minute: $('#select-from-minute-monday').val()
    };
    var endtime = { Hour: $('#select-until-hour-monday').val(),
        Minute: $('#select-until-minute-monday').val()
    };
    workdaysdic[workdaysdic.length] = { "Monday": { Start: starttime, End: endtime} };
}

        //and so on...

        return workdaysdic;
    }

I get error: the server responded with a status of 400 (Bad Request)

Do you have JSON.Net in your ASP.NET references? – Buzinas Apr 06 '14 at 06:19 — Buzinas, Apr 06 '14 at 06:19

score 1 · Accepted Answer · answered Apr 06 '14 at 06:39

Finally I managed to solve the problem in the following way:

Instead of the array I created a list of objects (WCF):

[DataMember]
public List<DataItem> WorkDays { get; set; }

DataItem.cs:

[DataContract]
public class DataItem
{
    [DataMember]
    public string Key;

    [DataMember]
    public CustomDay Value;
}

I sent the list like this(JS):

function CreateWorkDaysDictonary() {

    var workdaysdic = new Array();

    if ($('#checkbox-sunday').is(':checked')) {
        var starttime = { Hour: $('#select-from-hour-sunday').val(),
            Minute: $('#select-from-minute-sunday').val()
        };
        var endtime = { Hour: $('#select-until-hour-sunday').val(),
            Minute: $('#select-until-minute-sunday').val()
        };
        workdaysdic.push({ Key: "Sunday", Value: { Start: starttime, End: endtime} });
    }

    if ($('#checkbox-monday').is(':checked')) {
        var starttime = { Hour: $('#select-from-hour-monday').val(),
            Minute: $('#select-from-minute-monday').val()
        };
        var endtime = { Hour: $('#select-until-hour-monday').val(),
            Minute: $('#select-until-minute-monday').val()
        };
        workdaysdic.push({ Key: "Monday", Value: { Start: starttime, End: endtime} });
    }

    //and so on...

    return workdaysdic;
}

And it works! :)

I will mention here that it works with a dictionary and I have not used it because I had to do serialization to xml file.

Sending KeyValuePair from AJAX to Wcf Service

1 Answers1