WebMethod fails to capture object sent via ajax

Question

I have been trying to get an object from the client in JavaScript to send to a C# WebMethod to handle it and process it. So far I have been unable to get the WebMethod to successfully handle the incoming json object.

My JavaScript:

var _Messages;
function callData() {
    var timeNow = new Date;
    $.ajax({
        type: "POST",
        url: "Default.aspx/All",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {_Messages = data.d; Render(data.d); $('#updated_time').html("<p class='text'>Last Updated: " + ("0" + timeNow.getHours()).slice(-2) + ":" + ("0" + timeNow.getMinutes()).slice(-2) + ":" + ("0" + timeNow.getSeconds()).slice(-2) + "</p>") },
        failure: function (response) {
            alert(response.d);
        }
    });
}

function printFunction() {
    var listofmsg = $.grep(_Messages, function(a) {
        return a.Text.trim().replace(/\r\n|\r|\n/g, ' ') == $('#navigate tr td').eq(active*2-1).text().trim().replace(/\r\n|\r|\n/g, ' ');
    });
    listofmsg[0].Text = listofmsg[0].Text.replace(/\r\n|\r|\n/g, ' ');
    var msg = listofmsg[0];
    //var input = {TimeStamp: msg.Text, TimeSet: msg.TimeSet, Text: msg.Text, Type: msg.Type, IsGreen: msg.IsGreen}    
    console.log(JSON.stringify({'message':msg}));
    $.ajax({
        type: "POST",
        url: "Default.aspx/PrintMessage",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({ 'message' : msg}),
        success: function (data) { console.log(data.d);},
        failure: function (response) {
            alert(response.d);
        }
    });
}

My Object:

public class Message
    {
        public string TimeStamp { get; set; }
        public DateTime TimeSet { get; set; }
        public string Text { get; set; }
        public string Type { get; set; }
        public bool IsGreen { get; set; }

        public Message(string timestamp, DateTime timeset, string text, string type, bool isgreen)
        {
            TimeStamp = timestamp;
            TimeSet = timeset;
            Text = text;
            Type = type;
            IsGreen = isgreen;
        }
    }

My WebMethod:

[WebMethod]
        public static bool PrintMessage(Message message)
        {
            try
            {
             ...
             return true
            }
            catch (Exception ex)
            {
             ...
             return false
            }
         }

My Error is that when I reach the WebMethod the message object is null. Despite it being filled on the client side like so:

{"message":[{"TimeStamp":"08:39:28","TimeSet":"/Date(1398727057151)/","Text":"TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST ","Type":"spc","IsGreen":true}]} 

Any ideas what is going wrong? My best guess is that I am not formatting my json object correctly,

Answer 1

Linting the JSON object you have provided (using http://jsonlint.com/) and it appears as though "message" is an array/collection and so deserialisation will be a tad off. You should either change the type in your method to:

public static bool PrintMessage(List<Message> message)

Or remove the array declaration (the [] brackets) in your JSON object declaration and retain the same signature, that is

public static bool PrintMessage(Message message)

With the JSON object modified to:

{ "message": { "TimeStamp": "08:39:28", "TimeSet": "/Date(1398727057151)/", "Text": "TEST TEST TEST TEST TEST", "Type": "spc", "IsGreen": true } }

I'm wondering if the property "message" is even needed actually.

Answer 2

Adjust your ajax post to use

$.ajax({
    type: "POST",
    url: "/PrintMessage",
    contentType: "application/json",
    data: JSON.stringify({ 'message' : msg}),
    success: function (data) { console.log(data.d);},
    failure: function (response) {
        alert(response.d);
    }
});