ASP.NET MVC视图表格数据提交至控制器的问题排查

一、无法触发POST方法的常见原因及修复 #

• URL路径错误：硬编码路径易与MVC路由不匹配，改用@Url.Action("TableList", "Home")生成正确请求地址，避免路由解析失败。
• 请求配置缺失：AJAX必须明确指定type: "POST"，同时设置contentType: "application/json; charset=utf-8"，否则MVC无法识别JSON格式请求体，找不到对应POST方法。
• 控制器方法特性遗漏：确保TableList方法标记了[HttpPost]特性，否则默认仅响应GET请求。

二、数据异常问题的原因及修复 #

1. 下拉框获取所有选项而非选中值 #

问题出在JS取值方式错误，需用.val()获取下拉框选中值，而非.text()或遍历所有option：

// 正确写法
var projectId = $(row).find('select[name="ProjectId"]').val();
// 错误写法（会拿到所有选项文本）
var projectId = $(row).find('select[name="ProjectId"]').text();

2. 数字输入框数据未传递成功 #

• 字段名不匹配：输入框的name属性必须与模型类属性名一致（比如模型有Hours属性，输入框需设置name="Hours"），否则MVC模型绑定无法匹配。
• 数据类型不兼容：输入框值默认是字符串，需转为数字类型后再提交，避免模型绑定失败：

var hours = parseFloat($(row).find('input[name="Hours"]').val()) || 0;

3. 动态添加行的选择问题 #

动态生成的行需确保遍历范围覆盖所有行，直接用$('#timeSheetTable tbody tr').each()即可包含静态和动态添加的行，不要使用仅绑定静态元素的选择器。

三、优化后的完整代码示例 #

前端JS脚本 #

$('#submitBtn').click(function() {
    var timeSheetList = [];
    // 遍历所有表格行收集数据
    $('#timeSheetTable tbody tr').each(function() {
        var $row = $(this);
        timeSheetList.push({
            ProjectId: $row.find('select[name="ProjectId"]').val(),
            TaskName: $row.find('input[name="TaskName"]').val(),
            Hours: parseFloat($row.find('input[name="Hours"]').val()) || 0,
            WorkDate: $row.find('input[name="WorkDate"]').val()
        });
    });

    $.ajax({
        url: '@Url.Action("TableList", "Home")',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(timeSheetList), // 将数组转为JSON字符串
        success: function(res) {
            alert(res.msg);
        },
        error: function(xhr) {
            console.log('提交失败：' + xhr.responseText);
        }
    });
});

后端模型与控制器 #

// 工时表模型类
public class TimeSheetModel
{
    public int ProjectId { get; set; }
    public string TaskName { get; set; }
    public decimal Hours { get; set; }
    public DateTime WorkDate { get; set; }
}

// Home控制器的POST方法
[HttpPost]
public ActionResult TableList(List<TimeSheetModel> timeSheetList)
{
    // 处理数据逻辑（比如存入数据库）
    // ...
    return Json(new { success = true, msg = "数据提交成功" });
}

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