如何绑定ASP.NET Core表格内同行输入框与按钮以更新数据库

方案1：每行独立表单实现（推荐） #

利用HTML原生表单的提交规则，给每一行的按钮和输入框绑定到同一个独立表单，提交时只会传递当前行的字段，无需修改现有后端逻辑。

前端循环代码修改如下： #

@foreach (var item in Model.Approvals)
{
    <tr>
        <td>@item.ApprovalReviewer</td>
        <!-- 其余原有表格列保持不变 -->
        <td>                           
            <!-- 给当前行表单设置唯一ID -->
            <form id="approve-form-@item.Key" asp-action="Approve" asp-controller="Dashboard" method="post" style="margin:0">
                <input type="hidden" asp-route-id="@item.Key" />
                <!-- 传递后端需要的ECRNumber字段 -->
                <input type="hidden" asp-for="Approval.ECRNumber" value="@Model.Approval.ECRNumber" />
                <button type="submit">Approve</button>
            </form>
        </td>
        <td>
            <!-- 通过form属性将输入框和当前行的表单关联，无需把输入框放在form标签内部 -->
            <input asp-for="Approval.ChangeReviewer" value="@item.ChangeReviewer" form="approve-form-@item.Key"/>
        </td>                                         
}

该方案完全使用原生HTML能力，无兼容性问题，不需要额外编写JavaScript代码，改造成本极低。

方案2：JavaScript绑定实现 #

如果不想调整现有DOM结构，可以通过JS监听按钮点击事件，动态获取同行输入框的值后提交：

第一步：给元素加标识类 #

<!-- 按钮增加class -->
<button class="approve-btn" asp-action="Approve" asp-route-id="@item.Key" asp-controller="Dashboard">Approve</button>
<!-- 输入框增加class -->
<input class="reviewer-input" asp-for="Approval.ChangeReviewer" value="@item.ChangeReviewer"/>

第二步：添加JS逻辑 #

document.addEventListener('DOMContentLoaded', () => {
    // 绑定所有审核按钮的点击事件
    document.querySelectorAll('.approve-btn').forEach(btn => {
        btn.addEventListener('click', e => {
            e.preventDefault();
            // 定位到当前按钮所在的行
            const currentRow = btn.closest('tr');
            // 获取同行输入框的值
            const changeReviewer = currentRow.querySelector('.reviewer-input').value;
            const key = btn.getAttribute('asp-route-id');
            // 获取全局的ECRNumber值
            const ecrNumber = document.querySelector('input[name="Approval.ECRNumber"]').value;

            // 构造表单提交
            const tempForm = document.createElement('form');
            tempForm.method = 'POST';
            tempForm.action = '/Dashboard/Approve';

            // 追加需要的字段
            const keyField = document.createElement('input');
            keyField.name = 'key';
            keyField.value = key;
            tempForm.appendChild(keyField);

            const reviewerField = document.createElement('input');
            reviewerField.name = 'Approval.ChangeReviewer';
            reviewerField.value = changeReviewer;
            tempForm.appendChild(reviewerField);

            const ecrField = document.createElement('input');
            ecrField.name = 'Approval.ECRNumber';
            ecrField.value = ecrNumber;
            tempForm.appendChild(ecrField);

            document.body.appendChild(tempForm);
            tempForm.submit();
        })
    })
})

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