AJAX POST возвращает контроллеру данные NULL

Question

Здравствуйте, у меня есть AJAX POST, который возвращает нулевые данные моему контроллеру.

Вот мой AJAX код

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

А вот мой контроллер

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

Вот моя модель 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; }
}

Он возвращает модель, но модель имеет пустые данные, почему это?

Первоначально я выполнял обычный POST, но В сообщении отсутствуют некоторые ключевые данные, как вы можете видеть в Неожиданные значения NULL в ViewModel в сообщении формы

Answer 1

Вам необходимо передать объект JSON при вызове AJAX.

Я обычно использую массив, где вы использовали IList<T> в своем ItemViewModel - я думаю, что это просто упрощает историю сериализации.

Вот пример кода для начала.

$(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" );
                },
            }
        });
    });
});

Я добавил некоторую обработку ошибок в вызов $.ajax, чтобы помочь вам выявить другие проблемы, помимо сериализация формы.