如何使用Ajax逐个提交循环生成的记录并解决仅首条数据发送问题

• 你在循环生成表格行时，给隐藏ID输入框、专家下拉框、提交按钮都使用了固定id属性，HTML规范要求ID全局唯一，JS通过ID选择器取值时只会返回页面中第一个匹配的元素，因此无论点击哪一行的提交按钮，只会拿到第一条记录的信息。
• 现有逻辑没有加入下拉框选中状态的校验逻辑。

1. 调整Razor视图代码 #

把重复的固定ID替换为可重复的class属性，修改循环生成行的部分代码：

@foreach (var item in Model.ghrardads)
{
    <tr>
        @switch (@item.NoeaKhadmat)
        {
            case 1:
                <td>审计</td>
                break;
            case 2:
                <td>财务</td>
                break;
            case 3:
                <td>人力资源</td>
                break;
        }
        <td>@item.MablghGhrardad</td>
        <td>@item.ShoroeeProjectDate</td>
        <td>@item.PayanProjectDate</td>
        <!-- 替换ID为class -->
        <input class="d-none ghradad-id" value="@item.id" />
        <td>
            <!-- 替换ID为class -->
            <select class="form-control taeen-karshnas" required autocomplete="off">
                <option value="" default selected>请选择</option>
                @foreach (var item1 in Model.Users)
                {
                    <option value="@item1.Id">@item1.FirstName @item1.Family</option>
                }
            </select>
        </td>
        <td class="text-center">
            <!-- 替换ID为class -->
            <button type="button" class="btn btn-sm btn-outline-success btn-submit"> <i class="fa fa-save"></i> 保存 </button>
        </td>
    </tr>
}

2. 重写JS逻辑，增加校验 #

点击按钮时通过DOM层级定位当前行的对应元素，先校验下拉框是否选中再发送请求：

$(".btn-submit").on('click', function () {
    // 定位当前点击按钮所在的表格行
    const currentRow = $(this).closest('tr');
    // 从当前行获取对应字段值
    const ghradadId = currentRow.find('.ghradad-id').val();
    const karshnasId = currentRow.find('.taeen-karshnas').val();
    const alertBox = $("#ohsnap");
    // 重置提示框状态
    alertBox.removeClass('d-none').show();

    // 校验专家下拉框是否选中
    if (!karshnasId) {
        alertBox.removeClass('alert-success').addClass('alert-danger').html('请先选择当前行的负责专家再提交');
        setTimeout(() => {
            alertBox.fadeOut('fast', () => alertBox.addClass('d-none'));
        }, 2000);
        return;
    }

    // 发送AJAX请求
    $.ajax({
        type: "Post",
        url: '@Url.Action("SubmitGhrardadStap39", "Project")',
        data: {
            GhradadID: ghradadId,
            TaeenKarShnas: karshnasId
        },
        // 加入ASP.NET Core防伪校验令牌，避免请求被拦截
        headers: {
            "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
        }
    }).done(res => {
        if (res.status == 'ok') {
            alertBox.removeClass('alert-danger').addClass('alert-success').html('记录提交成功');
            setTimeout(() => {
                alertBox.fadeOut('fast', () => alertBox.addClass('d-none'));
            }, 2000);
        }
    }).fail(() => {
        alertBox.removeClass('alert-success').addClass('alert-danger').html('提交失败，请稍后重试');
        setTimeout(() => {
            alertBox.fadeOut('fast', () => alertBox.addClass('d-none'));
        }, 2000);
    });
});

3. 后端接口增加参数校验（可选但建议） #

避免非法请求导致报错，修改接口代码：

[HttpPost]
public IActionResult SubmitGhrardadStap39(int GhradadID, string TaeenKarShnas)
{
    // 校验参数合法性
    if (GhradadID <= 0 || string.IsNullOrWhiteSpace(TaeenKarShnas))
    {
        return BadRequest();
    }
    var ghrar = _context.Ghrardad.Find(GhradadID);
    if (ghrar == null)
    {
        return NotFound();
    }
    ghrar.UserID = TaeenKarShnas;
    _context.SaveChanges();
    return Json(new { status = "ok" });
}

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