JSON Array Sends As Null To Controller

Question

I can't seem to find an answer elsewhere in StackOverflow, so I'm asking it now.

I am trying to test an updated PUT in my API for submitting answer data to our database from a Wordpress site. The API works as an intermediary between WP and SQL.

My class:

[DataContract]
public class WordpressAnswerEntry
{
    /// <summary>
    /// Gets or sets the ID of the question the user is submitting an answer for
    /// </summary>
    [DataMember]
    public string QuestionID { get; set; }

    /// <summary>
    /// Gets or sets the data they're submitting
    /// </summary>
    [DataMember]
    public string AnswerData { get; set; }
}

Simple and easy. I've tried with int QuestionID and string

My method:

    [AcceptVerbs("PUT")]
    [Route("api/Questions/{applicationID}/{groupID}")]
    public HttpResponseMessage Put([FromBody] IEnumerable<WordpressAnswerEntry> answerlist, int applicationID = 0, int groupID = 0)

Again, nothing special. I've tried this as a list, and a custom collection class. IEnumerable was my last attempt.

I have an index page in the API that I use to submit tests and see the JSON that is returned. Below is my test case:

        $("#TestQuestionsWithAnswersButton").click(function (e) {
            e.preventDefault();

            var answerEntries = {
                answers:
                [
                    { QuestionID: "14",
                     AnswerData: "first name" },
                    { QuestionID: "15",
                     AnswerData: "last name" },
                    { QuestionID: "16",
                     AnswerData: "email here" },
                     { QuestionID: "25",
                        AnswerData: "12"
                    },
                ]
            }

            var answerlist = {
                answers: answerEntries
            };


            $.ajax({
                type: "PUT",
                url: "api/Questions/0/96",
                data: JSON.stringify(answerlist),
                contentType: "application/json; charset-utf-8",
                dataType: "json",
                success: function (data) {
                    $("#ResponseDiv").html(JSON.stringify(data));
                },
                failure: function (errMsg) {
                    alert(errMsg);
                }
            });
        });

I have tried everything to get this to work. I have tried with and without the encapsulating "answerList". I have tried with and without stringfy. I have tried with and without {answerlist : answerEntries} and with or without stringfy on that. I've tried it with and without [DataMember] and [DataContract]. I have content type set. I have type set. I don't know what else to do.

Every test returns null for answerlist, every time, without fail. I have no idea what to do now. I can't release it until I can confirm it works but I can't confirm it because it just won't work. I can tell it routes correctly because my breakpoints are hit (and I get a 400, which I return on purpose when answers are null), but for some reason I can't get this JSON array to convert.

Answer 1

Rather than adding your array to an object and then adding that object to another object, just send the stringified array through:

         var  answers =
            [
                { QuestionID: "14",
                 AnswerData: "first name" },
                { QuestionID: "15",
                 AnswerData: "last name" },
                { QuestionID: "16",
                 AnswerData: "email here" },
                 { QuestionID: "25",
                    AnswerData: "12"
                }
            ];

Then in your ajax:

data: JSON.stringify(answers)

Answer 2

As already mentioned multiple times in the comments,

there is a data type mismatch between what is being sent and what is expected by the controller action.

Update what is being sent from the client to...

var answerList =  [
    { QuestionID: "14",
     AnswerData: "first name" },
    { QuestionID: "15",
     AnswerData: "last name" },
    { QuestionID: "16",
     AnswerData: "email here" },
     { QuestionID: "25",
        AnswerData: "12"
    },
];

the ajax call can remain unchanged as the data is being sent with the correct format