如何通过Ajax Web Api批量提交多行数据至数据库？现有代码仅支持首行提交

看起来你现在卡在只能提交单条考勤数据的问题上了，核心原因是当前代码只抓取了单个学生的信息，没有遍历所有行来收集数据。下面是具体的调整方案：

1. 页面结构前提梳理 #

首先要确保你的页面上，每一条学生考勤的行数据都有统一的容器标识，比如给每一行<tr>加上类名student-row，并且行内的每个字段（学生ID、姓名等）也有对应的类名，示例结构如下：

<tr class="student-row">
    <td class="studentid">S001</td>
    <td class="fullName">张三</td>
    <td class="course">数学</td>
    <td><select class="statusAtt"><option value="Present">出勤</option><option value="Absent">缺勤</option></select></td>
</tr>
<tr class="student-row">
    <td class="studentid">S002</td>
    <td class="fullName">李四</td>
    <td class="course">英语</td>
    <td><select class="statusAtt"><option value="Present">出勤</option><option value="Absent">缺勤</option></select></td>
</tr>

2. 修改前端Ajax代码，批量收集并提交数据 #

调整点击事件的逻辑，遍历所有学生行，把每一行的数据收集成数组后再提交给API：

$('#btnMark').click(function () {
    var date = new Date();
    // 初始化数组存储所有考勤记录
    var studentAttendanceRecords = [];

    // 遍历每一行学生数据
    $('.student-row').each(function() {
        var $currentRow = $(this);
        // 从当前行中提取各字段值
        var record = {
            "StdntId": $currentRow.find('.studentid').text().trim(),
            "StdntName": $currentRow.find('.fullName').text().trim(),
            "Course": $currentRow.find('.course').text().trim(),
            "Date": date.toISOString(), // 转成标准ISO时间格式，避免后端解析问题
            "Status": $currentRow.find('.statusAtt').val()
        };
        // 添加到数组中
        studentAttendanceRecords.push(record);
    });

    // 提交批量数据
    $.ajax({
        url: '/api/Test',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        headers: {
            'Authorization': 'Bearer ' + localStorage.getItem("accessToken")
        },
        data: JSON.stringify(studentAttendanceRecords), // 这里提交的是数组，不再是单个对象
        success: function (data) {
            $('#successModal').modal('show');
        },
        error: function (jqXHR) {
            $('#divErrorText').text(jqXHR.responseText);
            $('#divError').show('fade');
        }
    });
});

3. 后端Web API的调整 #

你的API接口需要改成接收数组类型的参数，以C#为例：

// 首先定义对应的模型类
public class StudentAttendance
{
    public string StdntId { get; set; }
    public string StdntName { get; set; }
    public string Course { get; set; }
    public DateTime Date { get; set; }
    public string Status { get; set; }
}

// 然后修改API Action，接收List<StudentAttendance>
[HttpPost]
[Route("api/Test")]
public async Task<IActionResult> BatchSubmitAttendance([FromBody] List<StudentAttendance> records)
{
    if (records == null || !records.Any())
    {
        return BadRequest("没有要提交的考勤记录");
    }

    // 执行批量插入逻辑，比如用EF Core的AddRange提升效率
    _context.StudentAttendances.AddRange(records);
    await _context.SaveChangesAsync();

    return Ok("批量提交成功");
}

额外注意事项 #

• 要根据你实际的页面DOM结构调整选择器（比如.student-row、.studentid这些类名），确保能正确抓取到每一行的字段值。
• 提交时间时建议转成ISO格式（date.toISOString()），避免不同环境下的时间解析问题。
• 可以在提交前加入验证逻辑，比如检查是否有未选择状态的行，或者必填字段为空的情况，提前提示用户。

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