AJAX POST 正在向控制器返回 NULL 数据答案

【问题标题】：AJAX POST is returning NULL data to the controllerAJAX POST 正在向控制器返回 NULL 数据
【发布时间】：2020-11-03 23:08:42
【问题描述】：

您好，我有一个 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，但该帖子缺少一些关键数据，正如您在 Unexpected nulls in ViewModel on Form Post 中看到的那样

【问题讨论】：

假设模型正确，您的 Ajax 调用中缺少 contentType: 'application/x-www-form-urlencoded; charset=UTF-8'。
这里的 sn-ps 中没有很多信息。您是否检查了开发者控制台以确保您的 ajax 正在发送正确的数据？你有没有在你的控制器中设置调试断点来检查接收到的数据。
@tstrand66 是的，我在控制器中设置了调试断点，它正在发送一个模型，但其中的数据为空。不确定如何检查开发者控制台
@derloopkat 我尝试了你的建议，但仍然得到空数据，好吧，我在我的模型中添加了
@JoshFontaine 在浏览器中按 f12 然后检查网络选项卡。您应该能够看到发布的数据主体。如果它是空的，那么你的失败，如果它有效，那么你的控制器的模型绑定器失败了。

标签： c# html ajax asp.net-mvc

【解决方案1】：

您需要在进行 AJAX 调用时传递一个 JSON 对象。

我通常使用数组，您在 ItemViewModel 中使用了 IList<T> -- 我认为它只是让序列化故事更简单。

这里有一些示例代码可以帮助您入门。

$(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 调用中添加了一些错误处理，以帮助您捕捉除表单序列化之外的其他问题。

【讨论】：