ASP.NET Core MVC中如何将JSON数据从视图传递到控制器方法

我是.NET Core MVC新手，希望将数据以JSON格式从视图传递到控制器。我创建了用于保存数据的动态表格，想将新增的数据提交到控制器。请检查我的逻辑是否有误，或告知如何实现目标，我需要在SubmitExpense()方法中获取这些值。

我的JavaScript代码 #

$(function () {
    $('#btnSave').on('click', function () {
        //alert('1111');
        var ExpenseCliamViewModel = {};
        var ExpenseClaimLineItems = new Array();

        $("#myTable:eq(0) TR").each(function () {
            var row = $(this);
            var ExpenseClaimLineItem = {};
            ExpenseClaimLineItem.LineItemTitle = row.find("TD").eq(1).html();
            ExpenseClaimLineItem.LineItemDescription = row.find("TD").eq(2).html();
            ExpenseClaimLineItem.ExpenseTypeName = row.find("TD").eq(3).html();
            ExpenseClaimLineItem.LineItemAmount = row.find("TD").eq(4).html();
            ExpenseClaimLineItem.LineItemClaimDate = row.find("TD").eq(5).html();
            ExpenseClaimLineItems.push(ExpenseClaimLineItem);
        });

        ExpenseCliamViewModel.ExpenseClaimLineItem = ExpenseClaimLineItems;
        ExpenseCliamViewModel.Title = $("#Title").val();
        ExpenseCliamViewModel.Description = $("#Description").val();
        ExpenseCliamViewModel.TotalAmount = $('#lblGrandTotal').html();

        console.log(JSON.stringify(ExpenseCliamViewModel));

        if (ExpenseCliamViewModel != null) {
            $.ajax({
                type: "POST",
                url: "/Expense/SubmitExpense",
                data: JSON.stringify(ExpenseCliamViewModel),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response != null) {
                        alert('Sucess');
                    } else {
                        alert("Something went wrong");
                    }
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            }); 
        }
        else
            alert('failed');          
    });
});

我的控制器C#方法 #

[HttpPost]
public JsonResult SubmitExpense(ExpenseCliamViewModel expenseCliamViewModelData)
{
    int insertedRecords = 1;
    return Json(insertedRecords);
}

问题排查与修正建议 #

1. 控制器参数添加[FromBody]特性 #

.NET Core默认不会从请求体中解析JSON绑定到参数，必须显式添加[FromBody]特性，修改控制器方法：

[HttpPost]
public JsonResult SubmitExpense([FromBody] ExpenseCliamViewModel expenseCliamViewModelData)
{
    int insertedRecords = 1;
    return Json(insertedRecords);
}

2. 确保模型类与JSON结构完全匹配 #

• ExpenseCliamViewModel类中，ExpenseClaimLineItem属性必须是集合类型（比如List<ExpenseClaimLineItem>），而非单个对象。
• 模型类的属性名称要和JSON中的键完全一致（包括大小写，C#属性建议用PascalCase，需和JSON键对应）。
• 示例模型类参考：

public class ExpenseCliamViewModel
{
    public string Title { get; set; }
    public string Description { get; set; }
    public decimal TotalAmount { get; set; } // 数值类型需匹配前端传入的数字格式
    public List<ExpenseClaimLineItem> ExpenseClaimLineItem { get; set; }
}

public class ExpenseClaimLineItem
{
    public string LineItemTitle { get; set; }
    public string LineItemDescription { get; set; }
    public string ExpenseTypeName { get; set; }
    public decimal LineItemAmount { get; set; }
    public DateTime LineItemClaimDate { get; set; }
}

3. 跳过表格表头行 #

当前JS会遍历表格所有行，包括表头（<th>所在的行），导致表头数据被误提交。修改遍历逻辑：

// 方式1：跳过第一行表头
$("#myTable:eq(0) TR:gt(0)").each(function () {
    // 原有逻辑不变
});

// 方式2：通过判断行内是否有<th>跳过表头
$("#myTable:eq(0) TR").each(function () {
    var row = $(this);
    if (row.find("TH").length > 0) return;
    // 原有逻辑不变
});

4. 数据类型转换 #

前端获取的表格内容是字符串，需转换成对应的数据类型，确保控制器能正确解析：

ExpenseClaimLineItem.LineItemAmount = parseFloat(row.find("TD").eq(4).html());
// 日期转成ISO格式字符串，适配.NET Core解析
ExpenseClaimLineItem.LineItemClaimDate = new Date(row.find("TD").eq(5).html()).toISOString();

5. 调试与验证 #

• 打开浏览器控制台，查看console.log(JSON.stringify(ExpenseCliamViewModel))的输出，确认JSON结构是否符合预期。
• 在控制器方法中设置断点，检查expenseCliamViewModelData是否正确接收数据，或查看请求体内容是否匹配。

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