ASP.NET Core 8.0 MVC Ajax提交数据至控制器时参数为null问题

问题背景 #

在ASP.NET Core 8.0 MVC项目中，通过Razor页面的jQuery Ajax提交图书表单数据到控制器，表单序列化后控制台显示数据正常（ISBN=9780132350884&Title=gg&Author=gg&AvailabilityStatus=true&AvailabilityStatus=false），但控制器接收的参数始终为null。尝试修改控制器返回类型、将参数改为Book对象均未解决。

核心问题分析 #

1. Ajax配置错误：原代码中使用了content属性而非正确的contentType，导致请求头格式设置错误。
2. 参数绑定不匹配：表单序列化默认生成x-www-form-urlencoded格式数据，但原控制器期望接收jsonInput字符串参数，未指定正确的绑定来源；同时序列化数据中出现重复的AvailabilityStatus字段，会导致绑定异常。

解决方案 #

方案一：直接绑定Book对象（推荐） #

1. 修正控制器代码

使用[FromForm]特性指定从表单数据绑定Book对象：

// POST : Book/Create and AddBook
[HttpPost]
public JsonResult BookAdd([FromForm] Book book)
{
    if (book == null)
    {
        return Json(0);
    }

    _bookRepository.AddBook(book);
    return Json(1);
}

2. 修正jQuery Ajax代码

• 阻止按钮默认提交行为，避免页面刷新
• 修正contentType配置（表单序列化默认格式为application/x-www-form-urlencoded，可显式指定或省略）

$('#btn_SubmitBook').click(function (e) {
    // 阻止表单默认提交行为
    e.preventDefault();

    var data = $("#frm_newBook").serialize();

    $.ajax({
        url: '@Url.Action("BookAdd", "Library")',
        type: 'POST',
        dataType: 'json',
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        data: data,
        success: function(result) {
            console.log("提交成功", result);
        },
        error: function(xhr) {
            console.log("提交失败", xhr);
        }
    });
});

方案二：接收JSON字符串参数 #

如果需要保持原控制器的jsonInput参数设计，可按以下修改：

1. 调整jQuery Ajax代码

将表单数据转为JSON字符串，设置请求内容类型为application/json：

$('#btn_SubmitBook').click(function (e) {
    e.preventDefault();

    // 将表单序列化数据转为对象
    var formArray = $("#frm_newBook").serializeArray();
    var bookObj = {};
    $.each(formArray, function(index, item) {
        bookObj[item.name] = item.value;
    });
    // 转为JSON字符串
    var jsonData = JSON.stringify(bookObj);

    $.ajax({
        url: '@Url.Action("BookAdd", "Library")',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: jsonData,
        success: function(result) {
            console.log("提交成功", result);
        },
        error: function(xhr) {
            console.log("提交失败", xhr);
        }
    });
});

2. 修正控制器代码

添加[FromBody]特性指定从请求体接收JSON字符串：

// POST : Book/Create and AddBook
[HttpPost]
public JsonResult BookAdd([FromBody] string jsonInput)
{
    if (String.IsNullOrEmpty(jsonInput))
    {
        return Json(0);
    }

    Book book = JsonConvert.DeserializeObject<Book>(jsonInput);

    _bookRepository.AddBook(book);
    return Json(1);
}

额外注意事项 #

序列化数据中出现AvailabilityStatus=true&AvailabilityStatus=false，说明页面存在两个name为AvailabilityStatus的输入控件。需检查Razor代码，确保只有一个绑定AvailabilityStatus的复选框，避免参数绑定冲突。

内容的提问来源于stack exchange，提问作者Kalacia