表单序列化后附加字符串列表，控制器接收Model为NULL的问题求助

这个问题我之前也碰到过，核心原因是你传递model的方式不对——MVC的模型绑定器没法把serialize()返回的URL编码字符串直接解析成你的Model对象，所以才会出现model为null的情况。下面给你两种可行的解决方案：

解决方案1：将表单数据转为对象并以JSON格式提交 #

这种方法会把表单数据转换成JavaScript对象，和products数组一起包裹成一个请求对象，再以JSON格式发送给后端，适合Model结构较复杂的场景。

前端代码修改： #

// 工具函数：把表单序列化数组转为对象，兼容多值字段（如复选框）
function formToObject(formSelector) {
    const formObj = {};
    $(formSelector).serializeArray().forEach(item => {
        if (formObj[item.name]) {
            if (!Array.isArray(formObj[item.name])) {
                formObj[item.name] = [formObj[item.name]];
            }
            formObj[item.name].push(item.value);
        } else {
            formObj[item.name] = item.value;
        }
    });
    return formObj;
}

// 处理表单和选中的产品
const modelData = formToObject("#CreateForm");
const checkedElements = Array.from(document.querySelectorAll('#productCheckbox:checked'))
    .map(el => el.name);

if (checkedElements.length === 0) {
    alert('You must select at least one product');
    return;
}

// 组装请求数据
const requestData = { 
    model: modelData, 
    products: checkedElements 
};

$.ajax({
    url: '/Product/Create',
    type: 'post',
    dataType: 'json',
    contentType: 'application/json', // 必须指定JSON格式
    data: JSON.stringify(requestData), // 转成JSON字符串发送
    success: function (response) {
        console.log('Success: ' + JSON.stringify(response))
    },
    error: function (error) {
        console.log('Error: ' + JSON.stringify(error))
    }
});

后端代码修改： #

首先创建一个用于接收请求的DTO类（替换示例中的Model为你实际的模型类名）：

public class CreateProductRequest
{
    public Model Model { get; set; }
    public List<string> Products { get; set; }
}

然后修改控制器方法，添加[FromBody]特性告诉MVC从JSON请求体中绑定数据：

public ActionResult Create([FromBody] CreateProductRequest request)
{
    // 直接使用request.Model和request.Products进行业务处理
}

解决方案2：扁平化提交表单数据和products列表 #

如果你不想额外创建DTO类，可以把表单字段和products数组合并成一组键值对，直接以表单编码格式提交，后端可直接接收Model和products参数。

前端代码修改： #

// 获取表单序列化数组
const formData = $("#CreateForm").serializeArray();
const checkedElements = Array.from(document.querySelectorAll('#productCheckbox:checked'))
    .map(el => ({ name: 'products', value: el.name }));

if (checkedElements.length === 0) {
    alert('You must select at least one product');
    return;
}

// 将选中的产品项合并到表单数据中
formData.push(...checkedElements);

$.ajax({
    url: '/Product/Create',
    type: 'post',
    data: formData, // jQuery自动转成form-urlencoded格式
    success: function (response) {
        console.log('Success: ' + JSON.stringify(response))
    },
    error: function (error) {
        console.log('Error: ' + JSON.stringify(error))
    }
});

后端代码修改： #

仅需要把products参数类型从object改为List<string>（方便直接使用）：

public ActionResult Create(Model model, List<string> products)
{
    // model自动绑定表单字段，products自动绑定所有name为"products"的提交值
}

为什么原来的代码会失败？ #

$("#CreateForm").serialize()返回的是类似username=foo&email=bar@example.com的URL编码字符串，当你把这个字符串赋值给data.model发送时，请求体内容会变成model=username%3Dfoo%26email%3Dbar%40example.com&products=prod1&products=prod2。MVC的模型绑定器会尝试把model参数当成字符串处理，但你的参数是Model类型，无法完成解析，最终导致model为null。

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