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
– Arunprasanth K V, Commented Oct 22, 2018 at 7:13
Try just posting JSON.stringify(courseAttended); This looks like you're sending an object to your controller, rather than an array. — Tom Johnson
– Tom Johnson, Commented Oct 22, 2018 at 7:17
Thanks RoryMcCrossan. @TiisetsoTjabane you can check this question too it has some good answers: stackoverflow.com/questions/13242414/… — Abdullah Dibas
– Abdullah Dibas, Commented Oct 22, 2018 at 9:10

Tiisetso Tjabane · Accepted Answer · 2018-10-22 09:22:12Z

1

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.

answered Oct 22, 2018 at 9:22

Tiisetso Tjabane

2,1062 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nkosi Over a year ago

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.

R.Sarkar · Accepted Answer · 2018-10-22 10:52:14Z

0

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; }
}

answered Oct 22, 2018 at 10:52

R.Sarkar

3542 silver badges9 bronze badges

Collectives™ on Stack Overflow

Post Objects collection to Web Api Controller

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related