Post Objects collection to Web Api Controller

Question

I am trying to make an http post using jquery to the Web API controller, I am posting an array of objects to the controller but when is gets to the server the array is empty.

javascript

        var url = "api/actuary/" + $("#ActuaryId").val() + "/documents/";
        var inputs = $("#proofOfTraining input[type='checkbox']");
        var courseAttended = []
        inputs.each(function (ind, val) {
            var course = {};
            course["IsDone"] = $(val).is(":checked");
            course["Title"] = $(val).attr("name");
            course["ActuaryId"] = $("#ActuaryId").val();
            courseAttended.push(course);
        });
        console.log(courseAttended)
        $.post(url, JSON.stringify({ courseAttended }), function (response) {
            console.log(response)
        })

post Data

controller

    [Route("api/actuary/{actuaryId:long}/documents/")]
    [HttpPost]
    public async Task<IHttpActionResult> uploadCourseTrainingProofAsync(List<CourseModel> courseAttended)
    {
        try
        {
            using (Data.ADPDB db = new Data.ADPDB())
            {
                foreach (CourseModel course in courseAttended)
                {
                    var tempDoc = new documents();
                    tempDoc.ActuaryId = course.ActuaryId;
                    tempDoc.Document = null;
                    tempDoc.DocumentTypeId = -1;
                    tempDoc.Done = course.IsDone;
                    tempDoc.Title = course.Title;

                    db.documents.Add(tempDoc);
                }
                await db.SaveChangesAsync();
            }
            return Ok();
        }
        catch (Exception ex) {
            return InternalServerError(ex.InnerException);
        }
    }

Model

    public class CourseModel
{
    public int ActuaryId { get; set; }

    public string Title { get; set; }

    public bool IsDone { get; set; }
}

can we see the array of objects you are passing, and if you are using post then why dont you pass actuaryId in the body ? — Arunprasanth K V, Oct 22 '18 at 07:13
Try just posting JSON.stringify(courseAttended); This looks like you're sending an object to your controller, rather than an array. — Tom Johnson, Oct 22 '18 at 07:17
@Tom Johnson Whether its in an object or not I am still getting on empty array on the server. — Tiisetso Tjabane, Oct 22 '18 at 07:35
I have tried the above suggestions but the array is still coming in empty — Tiisetso Tjabane, Oct 22 '18 at 07:41
can you remove {actuaryId:long} from your code and try ? and one more thing try to change your ActuaryId type as string instead of int — Arunprasanth K V, Oct 22 '18 at 08:39
I'm not sure if this is different from @RoryMcCrossan 's answer but try to use JSON.stringify({ 'courseAttended': courseAttended }) also try to pass the data type as JSON into the method $.post, although it should be smart to detect the type by itself. — Abdullah Dibas, Oct 22 '18 at 09:04
Thanks RoryMcCrossan. @TiisetsoTjabane you can check this question too it has some good answers: https://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method-using-jquery-ajax — Abdullah Dibas, Oct 22 '18 at 09:10
@Abdullah Dibas I ended up with the same solution suggested at the post. — Tiisetso Tjabane, Oct 22 '18 at 09:23

score 1 · Answer 1 · answered Oct 22 '18 at 09:22

This is what ended up working for me.

Javascript

        var inputs = $("#proofOfTraining input[type='checkbox']");

        var courseAttended = []
        inputs.each(function (ind, val) {
            var course = {};
            course["IsDone"] = $(val).is(":checked");
            course["Title"] = $(val).attr("name");
            course["ActuaryId"] = parseInt($("#ActuaryId").val());
            courseAttended.push(course);
        });

        $.ajax({
            url: "api/actuary/" + $("#ActuaryId").val() + "/documents/",
            cache: false,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(courseAttended),
            dataType: "json",
            success: function (data) {
                console.log(data)
            }
        })

Controller:

    [Route("api/actuary/{actuaryId:long}/documents/")]
    [HttpPost]
    public async Task<IHttpActionResult> 
    uploadCourseTrainingProofAsync(List<CourseModel> courseAttended)
    {
     //.....
    }

I m more interested as to why I have specify the rest of the details in the ajax request.

Thanks for the suggestions.

Most likely the original code did not specify the correct content type (JSON) so the model binder was unable to bind the incoming data to the model. — Nkosi, Oct 22 '18 at 09:47

score 0 · Answer 2 · answered Oct 22 '18 at 10:52

you have specify Content-Type for your request. for your case json. Also you have to change the type of ActuaryId int to string in your model class. below is the working code.

 $.ajax({
        type: "POST",
        contentType: 'application/json',
        url: "api/url",
        data: JSON.stringify(courseAttended),
        success:  (response)=> {
            console.log(response);
        },
        error: (response) =>{
            console.log(response);
        }
    });

public class CourseModel
{
    public string ActuaryId { get; set; }

    public string Title { get; set; }

    public bool IsDone { get; set; }
}

Post Objects collection to Web Api Controller

2 Answers2