ASP.NET Core中Ajax传递数组至后端接口为空的问题

看起来你遇到的核心问题是前端AJAX请求的数据格式和后端参数绑定规则不匹配，导致后端无法正确解析传入的filters数组。咱们一步步拆解并修复：

一、核心问题所在 #

你的前端AJAX设置了contentType: "application/json; charset=utf-8"，这表示要发送JSON格式的数据，但你传递的data是JS对象{ filters : data }——jQuery在这种情况下不会自动把对象序列化为JSON字符串，反而会默认用表单编码格式（application/x-www-form-urlencoded）发送，这就和你声明的contentType冲突了，后端自然无法正确绑定数组。

另外，traditional: true是用于传统表单提交数组的（比如filters[]=val1&filters[]=val2格式），和JSON提交场景不兼容，反而可能干扰绑定。

二、两种可行的修复方案 #

方案1：使用JSON格式提交（推荐） #

前端代码修改：

把data转为JSON字符串，同时移除不必要的traditional: true：

$(function () { 
    $("#showReport").click(function () { 
        var data = []; 
        for (var i = 0; i < @Model.LiFilters.Count; i++) { 
            data[i] = $("#filter" + i).val(); 
        } 
        $("#myDiv").remove(); 
        $.ajax({ 
            type: "POST", 
            url: '@Url.Action("ShowReport", "Report")', 
            data: JSON.stringify({ filters: data }), // 将对象转为JSON字符串
            contentType: "application/json; charset=utf-8", 
            dataType: "json", 
            success: function (response) { 
                alert(data); 
                alert(response[0]); 
                // 注意：myDiv已被移除，需重新创建后再插入内容，或提前不要移除
                $("body").append('<div id="myDiv"></div>');
                $("#myDiv").html(response[0]); 
                alert(response); 
            }, 
            failure: function (response) { 
                alert(response.responseText); 
            }, 
            error: function (response) { 
                alert(response.responseText); 
            } 
        }); 
        return false; 
    }); 
});

后端代码修改：

定义一个DTO类来接收JSON对象，绑定更稳定：

// 定义接收请求的DTO类
public class FilterRequest
{
    public string[] Filters { get; set; }
}

[HttpPost]
public JsonResult ShowReport([FromBody] FilterRequest request)
{
    string[] filters = request.Filters; // 这里就能拿到前端传的数组了
    C_AminReport aminReport = null;
    string sErr = string.Empty;
    string sReport = "Empty Report!";
    if (C_AminReport.U_GetReport(aminReport.ID, out aminReport)) { 
        int iConIndex = Get_ServiceIndex(); 
        aminReport.U_RenderReport(iConIndex, ref sErr); 
        aminReport.U_GetReportFromAmin(iConIndex, aminReport, out sReport, ref sErr); 
    } 
    string[] asReport; 
    JsonBuilder.U_TryReadJson(sReport, out asReport); 
    return Json(asReport); 
}

如果不想定义DTO，也可以直接接收数组：

• 前端data改为JSON.stringify(data)
• 后端Action改为public JsonResult ShowReport([FromBody] string[] filters)

方案2：使用传统表单格式提交 #

如果不想用JSON，也可以用传统表单提交方式，让jQuery自动处理数组编码：

前端代码修改：

$(function () { 
    $("#showReport").click(function () { 
        var data = []; 
        for (var i = 0; i < @Model.LiFilters.Count; i++) { 
            data[i] = $("#filter" + i).val(); 
        } 
        $("#myDiv").remove(); 
        $.ajax({ 
            type: "POST", 
            url: '@Url.Action("ShowReport", "Report")', 
            traditional: true, // 保留该配置处理表单数组编码
            data: { filters : data }, // 直接传对象，jQuery会转成filters[]=val1&filters[]=val2格式
            dataType: "json", 
            success: function (response) { 
                // ... 原有逻辑
            }, 
            failure: function (response) { 
                alert(response.responseText); 
            }, 
            error: function (response) { 
                alert(response.responseText); 
            } 
        }); 
        return false; 
    }); 
});

后端代码修改：

不需要加[FromBody]，直接用原参数即可：

[HttpPost]
public JsonResult ShowReport(string[] filters)
{
    // 这里filters就能拿到数据了
    // ... 原有逻辑
}

三、额外小问题提醒 #

原代码里先执行$("#myDiv").html("Hello!")，紧接着又$("#myDiv").remove()，之后在success回调里又尝试$("#myDiv").html(response[0])——此时myDiv已被移除，不会显示内容。你可以：

• 不要提前移除myDiv，只在success里更新内容
• 如果必须移除，在success里重新创建myDiv元素再插入内容

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