ASP.NET MVC5中AJAX点击列表项总是传递首个ID该如何解决

问题根源 #

你的代码核心问题是循环生成列表时重复使用了相同的id属性：HTML规范要求同一页面内id必须唯一，当你用$('#ResponseDiv')选择元素时，jQuery永远只会匹配到页面中第一个出现的该id元素，导致无论点击哪个条目，结果都会更新到第一行，你误以为传递的是第一条数据的ID，实际上是渲染位置错了。

修复方案 #

第一步：修改视图代码 #

调整循环内的DOM结构，去掉重复id，改用class标识容器，同时移除内联onclick事件，用data属性存储人员ID：

@if (Model.PessoasDFVM.Count == 0)
{
    <!-- 补全td结构，避免表格渲染异常 -->
    <tr>
        <td colspan="2">暂无人员休假</td>
    </tr>
}
else
{
    foreach (PortalInternoBBG.Web.Models.HomePage.PessoaDFVM pessoaDeFerias in Model.PessoasDFVM)
    {
        <tr>
            <td>@pessoaDeFerias.Nome</td>
            <td>
                <!-- 用class替代重复id，data属性存人员ID -->
                <div class="response-container" data-id="@pessoaDeFerias.IDstring">
                    <a href="#" class="return-date-link">
                        Data de Regresso
                    </a>
                </div>
            </td>
        </tr>
    }
}

第二步：修改AJAX逻辑 #

改用事件委托绑定点击事件，只更新当前点击条目的容器：

$(function() {
    // 事件委托适配所有列表条目，包括后续动态新增的内容
    $(document).on('click', '.return-date-link', function(e) {
        e.preventDefault(); // 阻止a标签默认跳转行为
        const $link = $(this);
        const $currentContainer = $link.closest('.response-container');
        const targetId = $currentContainer.data('id');

        // 可选：加加载状态避免重复点击
        $link.text('计算中...').css('pointer-events', 'none');

        $.ajax({
            url: urlCalculaDataDeRetorno,
            data: { "id": targetId },
            type: "POST",
            success: function (data) {
                // 只替换当前点击条目的容器，不影响其他行
                $currentContainer.replaceWith("<div>" + data + "</div>");
            },
            failure: function (response) {
                alert(response.responseText);
                // 恢复按钮可点击状态
                $link.text('Data de Regresso').css('pointer-events', 'auto');
            },
            error: function (response) {
                alert(response.responseText);
                $link.text('Data de Regresso').css('pointer-events', 'auto');
            }
        });
    });
});

验证方法 #

如果修复后还是有问题，可以在AJAX请求前加console.log(targetId)，打开浏览器F12控制台，点击不同条目查看输出的ID是否和当前条目匹配，若ID仍然错误，需要检查后端给PessoaDFVM的IDstring字段赋值是否正确。

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