如何通过Ajax在Razor中向ASP.Net Core控制器传递对象列表？

现有Ajax调用代码尝试传递多个参数，其中包含来自Model的V3FundOptions对象列表，但运行时浏览器控制台抛出：

Uncaught SyntaxError: Unexpected number (at PayrollAudit:2617:66)

原因是直接使用@Model.V3FundOptions会渲染成集合类型名称而非JSON格式的对象列表，导致JS语法错误。

当前Ajax代码：

const result = await $.ajax({
    type: "POST",
    url: "/PayrollAudit/SaveFundFindings",
    data: {
        'fundFindingsGridRows': DATA,
        'revisionDateExists': @Model.revisionDateExists.ToString().ToLower(),
        'rev': @Model.rev.ToString().ToLower(),
        'deficiency': @Model.deficiency,
        'principalAndInterest': @Model.principalAndInterest,
        'newAudit': @Model.newAudit.ToString().ToLower(),
        'auditStartDate': moment('@Model.auditStartDate').format('MM/DD/YYYY'),
        'billingEntityFindingsTitle': '@Model.billingEntityFindingsTitle',
        'delinquency20': @Model.delinquency20,
        'billingEntityNo': '@Model.billingEntityNo',
        'revisionSentToFundsDate': moment('@Model.revisionSentToFundsDate').format('MM/DD/YYYY'),
        'V3FundOptions': @Model.V3FundOptions
    }
});

对应的Controller方法：

public IActionResult SaveFundFindings(
    List<FundFindingsGridRow> fundFindingsGridRows,
    bool revisionDateExists,
    bool rev,
    bool settlement,
    decimal deficiency,
    decimal principalAndInterest,
    bool newAudit,
    DateTime auditStartDate,
    string billingEntityFindingsTitle,
    decimal delinquency20,
    string billingEntityNo,
    DateTime revisionSentToFundsDate,
    List<FundOption> V3FundOptions
)
{
    // 业务逻辑
}

FundOption类定义：

public partial class FundOption
{
    public string ClientCode { get; set; }
    public string LvwColTitle { get; set; }
    public int ColOrder { get; set; }
    public string DbFieldName { get; set; }
}

1. 将Model集合序列化为JSON字符串 #

在Razor视图中，使用Json.Serialize将V3FundOptions转换为合法的JSON格式，前端再通过JSON.parse解析为JS对象：

const v3FundOptions = JSON.parse('@Json.Serialize(Model.V3FundOptions)');

2. 调整Ajax请求配置 #

• 设置contentType: "application/json; charset=utf-8"，明确告知Controller接收JSON格式数据
• 对整个请求数据对象进行JSON序列化，而非直接传键值对（因为包含复杂对象列表）

3. 简化基础类型参数的渲染 #

布尔值无需手动转小写字符串，Razor会直接渲染为true/false，JS可直接识别；日期可直接通过Razor渲染为指定格式，避免额外的moment处理（或根据后端解析能力调整格式）。

修改后的完整代码 #

// 先序列化Model中的集合
const v3FundOptions = JSON.parse('@Json.Serialize(Model.V3FundOptions)');

const result = await $.ajax({
    type: "POST",
    url: "/PayrollAudit/SaveFundFindings",
    contentType: "application/json; charset=utf-8", // 关键配置
    data: JSON.stringify({
        fundFindingsGridRows: DATA,
        revisionDateExists: @Model.revisionDateExists,
        rev: @Model.rev,
        deficiency: @Model.deficiency,
        principalAndInterest: @Model.principalAndInterest,
        newAudit: @Model.newAudit,
        auditStartDate: '@Model.auditStartDate.ToString("MM/dd/yyyy")',
        billingEntityFindingsTitle: '@Model.billingEntityFindingsTitle',
        delinquency20: @Model.delinquency20,
        billingEntityNo: '@Model.billingEntityNo',
        revisionSentToFundsDate: '@Model.revisionSentToFundsDate.ToString("MM/dd/yyyy")',
        V3FundOptions: v3FundOptions
    })
});

额外注意事项 #

• 确保FundOption类的属性名称与前端传递的键名完全一致（JS对大小写敏感）
• 如果DATA本身是JS对象数组，无需额外处理，直接包含在序列化对象中即可
• 后端Controller的参数名称需与前端传递的键名严格匹配（如V3FundOptions）

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