如何通过jQuery向ASP.NET MVC控制器发送对象列表和图片数据

AI 小北

2026-9-26

解决方案

你需要按照ASP.NET MVC默认模型绑定的命名规则，手动将所有字段填充到FormData中即可正常绑定，无需额外序列化操作，具体实现如下：

1. 前端构造FormData代码

// 初始化FormData对象
var formData = new FormData();

// 填充Research对象的基础属性
formData.append('Research.Id', idInput.val());
formData.append('Research.Title', titleInput.val());
formData.append('Research.Abstract', abstractInput.val());
formData.append('Research.Body', bodyInput.val());
// 填充图片文件
if (imageInput.get(0).files.length > 0) {
    formData.append('Research.ImageFile', imageInput.get(0).files[0]);
}

// 填充ResearchAuthors列表，必须带索引后缀匹配MVC列表绑定规则
$('#authors-tbody tr').each(function (index) {
    var authorId = $(this).children('.id-td').text();
    var raId = $(this).children('.researchAuthorsId-td').text();
    var researchId = idInput.val();
    
    formData.append(`ResearchAuthors[${index}].Id`, raId);
    formData.append(`ResearchAuthors[${index}].AuthorId`, authorId);
    formData.append(`ResearchAuthors[${index}].ResearchId`, researchId);
});

2. 提交AJAX请求配置

$.ajax({
    url: '/你的控制器名称/Create',
    type: 'POST',
    data: formData,
    // 必须添加以下两个配置，禁止jQuery自动处理数据和修改请求头
    contentType: false,
    processData: false,
    success: function (res) {
        // 自定义提交成功逻辑
        console.log(res.message);
    },
    error: function (err) {
        // 自定义提交失败逻辑
    }
});