AJAX POST is returning NULL data to the controller

Question

Hello I have an AJAX POST that is returning null data to my Controller.

Here is my AJAX code

$(document).ready(function () {
    $("button").click(function () {
        $.ajax({
            url: '@IGT.baseUrl/JODetails/SpecialOrderSummary',
            data: $('#form').serialize(),
            type: 'POST'
        });
    });
});

And here is my controller

public ActionResult SpecialOrderSummary(ItemViewModel model)
{
    if (model == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

    JobOrder jobOrder = db.JobOrders.Find(model.Id);
    if (jobOrder == null)
    {
        return HttpNotFound();
    }

    return View(model);
}

Here is my ItemViewModel

public class ItemViewModel
{
    [Required]
    public int Id { get; set; }
    [Required]
    public int JobId { get; set; }
    public string ItemId { get; set; }
    public string ItemName { get; set; }
    public string MFGNumber { get; set; }
    public IList<ItemPartViewModel> Parts { get; set; }
    public IList<ItemComponentViewModel> Components{ get; set; }
    public IList<ComponentPartViewModel> ComponentParts { get; set; }
    public IList<ComponentSubCompViewModel> ComponentSubComps { get; set; }
    public IList<SubCompPartViewModel> SubCompParts { get; set; }

    public IList<SubCompSubCompViewModel> SubCompSubComps { get; set; }
    public IList<SubCompSubCompPartViewModel> SubCompSubCompParts { get; set; }
}

It's returning the model but the the model has empty data, why is this?

I had originally done a normal POST but the post was missing some key data as you can see in Unexpected nulls in ViewModel on Form Post

Answer 1

You need to pass a JSON object when you make the AJAX call.

I typically use an array, where you have used IList<T> in your ItemViewModel -- I think it just makes the serialization story simpler.

Here is some sample code to get you started.

$(document).ready(function () {
    $("button").click(function () {

        // build the json object from the elements in the form... 

        // this is a sample object that would work well with your current model... 
        var payload = {
            "Id": 5,
            "JobId": 6,
            "ItemId": "Item0987", 
            "ItemName": "Some Sample Item Name",
            "MFGNumber": "B1235456",
            "Parts": [
                { "Id": "PartA", "PartName": "Sample Part A" },
                { "Id": "PartB", "PartName": "Sample Part B" }
            ]
        };

        $.ajax({
            url: "@IGT.baseUrl/JODetails/SpecialOrderSummary",
            data: JSON.stringify(payload),
            contentType: "application/json; charset=utf-8",            
            type: "POST", 
            success: function (data) {
                console.log(data);
            }, 
            error: function (req, status, err) {
                console.error(err);
            },
            statusCode: {
                404: function() {
                   console.error( "page not found" );
                },
                500: function() {
                   console.error( "server error" );
                },
            }
        });
    });
});

I added some error handling to the $.ajax call to help you catch other issues besides the form serialization.