ASP.NET AJAX无法传递数据，请求处理时出现空引用异常

我实现了一个动态考勤记录表，点击“Update Attendance”按钮后，期望接收所有更新字段的数据，但后端OnPostUpdateAttendance方法的foreach循环触发了空引用异常。目前有3个可更新字段，判断问题出在前端数据捕获或AJAX数据传递环节（HTML或脚本部分）。

前端HTML代码 #

<h2>Attendance Records:</h2>
<table>
    <thead>
        <tr>
            <th>Uid</th>
            <th>Student Name</th>
            <th>Attendance Status</th>
            <th>Minutes Late</th>
            <th>Absence Reason</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var att in Model.Attendance)
        {
            <tr data-uid="@att.uid" data-classid="@Model.SelectedClassId">
                <td>@att.uid</td>
                <td>@att.student_Name</td>
                <td>
                    <select asp-for="@att.student_Status">
                        @foreach (var statusOption in Model.Ref_ClassStudentStatusType)
                        {
                            <option value="@statusOption.Status_Type_ID">@statusOption.Status_Type_Name</option>
                        }
                    </select>
                </td>
                <td>
                    <input asp-for="@att.Minutes_Late" class="form-control" />
                </td>
                <td>
                    <input asp-for="@att.Absence_Reason" class="form-control" />
                </td>
            </tr>
            <tr class="separator-row">
                <td colspan="5"><!-- Empty cell to create the separation --></td>
            </tr>
        }
    </tbody>
</table>

<form method="post">
    <input type="hidden" name="SelectedClassId" value="@Model.SelectedClassId" />
    <input type="hidden" name="SelectedDate" value="@Model.SelectedDate.ToString("yyyy-MM-dd")" />
    <button type="submit" asp-page-handler="UpdateAttendance">Update Attendance</button>
   @* <span id="loading" style="display:none;"><i class="fas fa-spinner fa-spin"></i></span>*@
</form>

前端脚本代码 #

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#updateAttendanceButton').click(function (e) {
                e.preventDefault(); // Prevent the default form submission

                var updatedAttendance = [];

                // Loop through the table rows and gather data
                $('table tbody tr').each(function () {
                    var uid = $(this).data('uid');
                    var classId = $(this).data('classid');
                    var studentStatus = $(this).find('select').val();
                    var minutesLate = $(this).find('input[name="att.Minutes_Late"]').val();
                    var absenceReason = $(this).find('input[name="att.Absence_Reason"]').val();

                    updatedAttendance.push({
                        uid: uid,
                        classId: classId,
                        student_Status: studentStatus,
                        Minutes_Late: minutesLate,
                        Absence_Reason: absenceReason
                    });
                });

                // Send the data to the server using AJAX
                $.ajax({
                    type: 'POST',
                    url: '?handler=UpdateAttendance',
                    data: JSON.stringify(updatedAttendance),
                    contentType: 'application/json',
                    success: function (response) {
                        // Handle the response if needed
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
}

后端处理方法 #

public IActionResult OnPostUpdateAttendance([FromBody] List<UpdatedAttendanceModel> updatedAttendance)
{
    _logger.LogInformation("Received data: ");
    try
    {
        foreach (var attendance in updatedAttendance)
        {
            var uid = attendance.uid;
            var classId = attendance.Class_ID;
            var studentStatus = attendance.student_Status;
            var minutesLate = attendance.Minutes_Late;
            var absenceReason = attendance.Absence_Reason;

            // Process the updated attendance data here...
        }

        // Return a response indicating success
        return new JsonResult(new { success = true });
    }
    catch (Exception ex)
    {
        // Handle errors if needed
        return new JsonResult(new { success = false, errorMessage = ex.Message });
    }
}

更新数据模型 #

public class UpdatedAttendanceModel
{
    public int? uid { get; set; }

    public string? Class_ID { get; set; }

    public DateTime? attendance_date { get; set; }

    public string? student_Status { get; set; }

    public string? student_Name { get; set; }

    public int? Minutes_Late { get; set; }
    public string? Absence_Reason { get; set; }
}

问题排查与修复 #

1. 按钮绑定失效 #

脚本中绑定的#updateAttendanceButton在HTML中不存在，导致AJAX代码未执行，表单走默认提交流程，后端接收不到JSON格式数据，updatedAttendance为null触发异常。
修复：给按钮添加对应ID：

<button id="updateAttendanceButton" type="submit" asp-page-handler="UpdateAttendance">Update Attendance</button>

2. 遍历包含无效行 #

脚本遍历所有表格行时，会包含分隔行<tr class="separator-row">，这些行无data-uid和表单元素，导致收集到无效数据。
修复：仅遍历带有data-uid属性的行：

$('table tbody tr[data-uid]').each(function () {
    // 原有数据收集逻辑
});

3. 表单元素选择器错误 #

asp-for生成的input name属性不是固定的att.Minutes_Late，而是类似Attendance[0].Minutes_Late的格式，脚本中用固定name查找会失败，收集到undefined。
修复：通过列位置或类名选择：

// 方案1：按列位置选择
var minutesLate = $(this).find('td:nth-child(4) input').val();
var absenceReason = $(this).find('td:nth-child(5) input').val();

// 方案2：给输入框加类名后选择
// HTML修改：
<input asp-for="@att.Minutes_Late" class="form-control minutes-late" />
<input asp-for="@att.Absence_Reason" class="form-control absence-reason" />
// 脚本修改：
var minutesLate = $(this).find('.minutes-late').val();
var absenceReason = $(this).find('.absence-reason').val();

4. 属性名不匹配 #

脚本传递的字段是classId，但后端模型属性是Class_ID，反序列化时Class_ID会为null。
修复：统一字段名：

updatedAttendance.push({
    uid: uid,
    Class_ID: classId, // 改为与模型一致的字段名
    student_Status: studentStatus,
    Minutes_Late: minutesLate,
    Absence_Reason: absenceReason
});

5. 数值类型转换问题 #

前端收集到的minutesLate是字符串，后端模型为int?，若输入非数字会导致反序列化失败，updatedAttendance为null。
修复：前端转换为数字，空值设为null：

var minutesLate = $(this).find('td:nth-child(4) input').val();
minutesLate = minutesLate ? parseInt(minutesLate) : null;

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