使用JQuery修改Razor页面表格并更新数据库的问题排查

核心问题1：变量名大小写不匹配 #

你的JQuery代码中，定义的变量是rowID（大写D），但在AJAX请求的data里写的是rowId（小写d），这会导致传递给控制器的RowId为undefined，这是ID无法传递的直接原因。

核心问题2：选择器匹配所有下拉框，仅获取第一行数据 #

$(".status")会选中页面上所有class为status的下拉框，所以$(".status").val()和$(".status").closest('tr').attr('id')只会拿到第一行下拉框的值和对应的行ID，无法处理多行修改的场景。

修复后的完整代码 #

1. Razor视图调整 #

• 修正下拉框默认选中逻辑，根据模型值自动匹配对应选项
• 给每个下拉框添加自定义属性data-row-id存储行ID，避免通过父元素查找的潜在问题
• 优化循环内的变量引用，提升可读性

<head>
    <link rel="stylesheet" href="~/css/Development.css" asp-append-version="true" />
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>

<table id="ID_table" style="margin-top:50px;">
    <thead>
        <tr>
            <td>ID</td>
            <td>priority</td>
            <td>mnuName</td>
            <td>mnuForm</td>
            <td>Status</td>
            <td>comment</td>
        </tr>
    </thead>
    <tbody>
        @for(int i= 0; i< Model.table.Count; i++)
        {
            var item = Model.table[i];
            <tr id="@item.ID_Development">
                <td>@item.ID_Development</td>
                <td class="Checked" onclick="toggleContent(event)">@item.priority</td>
                <td>@item.mnuName</td>
                <td>@item.mnuForm</td>
                <td>
                    <select class="status" name="status" data-row-id="@item.ID_Development">
                        <option value="Selection" @(item.status == "Selection" ? "selected" : "")>Select</option>
                        <option value="Programmed" @(item.status == "Programmed" ? "selected" : "")>Programmed</option>
                        <option value="Test" @(item.status == "Test" ? "selected" : "")>Test</option>
                        <option value="Ready" @(item.status == "Ready" ? "selected" : "")>Ready</option>
                    </select>
                </td>
                <td class="table_Data_input"><input type="text" name="comment" class="input_field" value="@item.comment"></td>
            </tr>
        }
    </tbody>
</table>

<button id="submitButton" type="button">submit</button>

</body>

2. JQuery代码修复（批量提交所有修改行） #

• 修正变量名大小写错误
• 遍历所有下拉框，收集所有非默认选择的行数据，批量提交
• 使用自定义属性data-row-id获取行ID，更稳定可靠

$(document).ready(function () {
    $("#submitButton").click(function (e) {
        e.preventDefault();
        
        // 收集所有需要更新的行数据
        var updateData = [];
        $(".status").each(function() {
            var selectedValue = $(this).val();
            // 仅提交非默认选择的行
            if (selectedValue !== "Selection") {
                var rowID = $(this).data("row-id");
                updateData.push({
                    RowId: rowID,
                    Status: selectedValue,
                    Comment: $(this).closest('tr').find('.input_field').val() // 可选：同时提交评论内容
                });
            }
        });

        if (updateData.length === 0) {
            console.log("没有需要更新的数据");
            return;
        }

        $.ajax({
            type: "POST",
            url: "/Home/Update_Status",
            contentType: "application/json",
            data: JSON.stringify(updateData),
            success: function (response) {
                console.log("更新成功");
                // 可在此添加页面刷新或成功提示逻辑
            },
            error: function (error) {
                console.error("更新失败", error);
            }
        });
    });
});

3. 控制器调整（批量处理） #

• 新增模型类接收每行更新数据，规范参数传递
• 将RowId改为int类型，匹配你的整数ID类型

新增模型类（Models/StatusUpdateModel.cs）

public class StatusUpdateModel
{
    public int RowId { get; set; }
    public string Status { get; set; }
    public string Comment { get; set; } // 可选，对应评论输入框
}

控制器方法修改

[HttpPost]
public IActionResult Update_Status([FromBody] List<StatusUpdateModel> updateList)
{
    foreach (var item in updateList)
    {
        // 执行数据库更新逻辑，示例：
        // var development = _db.Developments.Find(item.RowId);
        // if (development != null)
        // {
        //     development.status = item.Status;
        //     development.comment = item.Comment;
        //     _db.SaveChanges();
        // }
    }
    return Json(new { success = true });
}

单行提交替代方案（仅提交最后修改的行） #

如果需求是每次只提交最后修改的那一行，可修改JQuery逻辑记录最后操作的下拉框：

$(document).ready(function () {
    var lastChangedSelect = null;
    
    // 记录最后修改的下拉框
    $(".status").change(function() {
        lastChangedSelect = $(this);
    });

    $("#submitButton").click(function (e) {
        e.preventDefault();
        
        if (!lastChangedSelect) {
            console.log("请先选择状态");
            return;
        }

        var selectedValue = lastChangedSelect.val();
        var rowID = lastChangedSelect.data("row-id");

        $.ajax({
            type: "POST",
            url: "/Home/Update_SingleStatus",
            data: { RowId: rowID, Status: selectedValue },
            success: function (response) {
                console.log("更新成功");
            },
            error: function (error) {
                console.error("更新失败", error);
            }
        });
    });
});

对应控制器方法：

[HttpPost]
public IActionResult Update_SingleStatus(int RowId, string Status)
{
    // 执行单行更新逻辑
    return Json(new { success = true });
}

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