ASP.NET MVC中Ajax向控制器传值异常：仅传递第一条数据

问题根源 #

你循环生成的按钮所有id都是getthis，但HTML规范中id必须是唯一的。document.getElementById('getthis')只会返回页面中第一个匹配该id的元素，所以每次点击都只能拿到第一条记录的data-id。

解决方案一：通过点击事件传递当前元素 #

修改循环中的按钮代码，在onclick里传入当前按钮对象this：

foreach (var item2 in RItem.GetChildItems(item.ID_Ca))
{
    <div id="@idc" class="accordion-collapse collapse" aria-labelledby="headingTwo2" 
         data-bs-parent="#accordionExample">
        <div class="accordion-body" style="background: white; padding: 5px; padding-left: 20px;">
            <!-- 移除重复的id，点击时传入当前按钮 -->
            <button data-id="@item2.Name_Ca" type="button" onclick="Search(this)" 
                    style=" color: #0028ff; font-size: 14px;">
                @item2.Name_Ca
            </button>
        </div>
    </div>
}

然后更新JS的Search函数，接收并使用传入的按钮元素：

function Search(btn) {
    jQuery('.loading').fadeIn();
    // 获取当前点击按钮的data-id
    var catValue = $(btn).data('id');

    $.ajax({
        url: 'SearchProjectsItems',
        type: 'post',
        dataType: 'json', // 注意修正为驼峰写法，原代码datatype拼写错误
        data: {
            Cat: catValue
        },
        error: function (err) {
            alert(err.Status + " " + err.StatusText);
        }
    }).done(function (data) {
        $('#Search_CU').html(data);
        jQuery('.loading').fadeOut();
    });
}

解决方案二：使用事件委托（推荐） #

这种方式将HTML结构与JS行为分离，更符合前端最佳实践，同时兼容动态生成的元素：

1. 修改按钮代码，移除onclick，添加统一的class：

foreach (var item2 in RItem.GetChildItems(item.ID_Ca))
{
    <div id="@idc" class="accordion-collapse collapse" aria-labelledby="headingTwo2" 
         data-bs-parent="#accordionExample">
        <div class="accordion-body" style="background: white; padding: 5px; padding-left: 20px;">
            <!-- 添加统一class，移除重复id和onclick -->
            <button class="search-project-btn" data-id="@item2.Name_Ca" type="button" 
                    style=" color: #0028ff; font-size: 14px;">
                @item2.Name_Ca
            </button>
        </div>
    </div>
}

2. 替换原JS代码为事件委托绑定：

// 委托给文档，监听所有.search-project-btn的点击事件
$(document).on('click', '.search-project-btn', function() {
    jQuery('.loading').fadeIn();
    // this就是当前点击的按钮元素
    var catValue = $(this).data('id');

    $.ajax({
        url: 'SearchProjectsItems',
        type: 'post',
        dataType: 'json',
        data: {
            Cat: catValue
        },
        error: function (err) {
            alert(err.Status + " " + err.StatusText);
        }
    }).done(function (data) {
        $('#Search_CU').html(data);
        jQuery('.loading').fadeOut();
    });
});

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