如何通过jQuery和Ajax向ASP.NET MVC控制器传递ID？问题求助

首先一眼就揪出了核心问题：你在foreach循环里给每个<div>和<p>都用了相同的id（pan和TestsId），但HTML里的id属性要求是全局唯一的！当你用JS去获取这些元素时，只会拿到页面中第一个匹配该id的元素，自然就拿不到对应项的正确Id了——这就是你操作出错的关键原因。

另外，用隐藏的<p>标签存业务数据也不是最优写法，更推荐用HTML5的data-*自定义属性来存储这类数据，既简洁又符合规范。

修正后的代码示例 #

把重复的id换成class，同时用data-id来存储item的Id：

@foreach (var item in listTest) {
    <div class="form-group panel panel-default pan-item">
        <!-- 用data属性存Id，替代隐藏的p标签 -->
        <div class="test-item" data-id="@item.Id">
            <text>@item.Name</text>
            <text>@item.testTypeCategory.Category</text>
            <text>@item.testTypeName.Name</text>
            <text>@item.Price</text>
            <button class="btn btn-danger btn-cart">加入购物车</button>
        </div>
    </div>
}

若需用JS获取对应Id（以点击按钮为例） #

假设你是点击按钮时要获取当前项的Id，JS可以这么写：

// 给所有按钮绑定点击事件
document.querySelectorAll('.btn-cart').forEach(btn => {
    btn.addEventListener('click', function() {
        // 向上找到包含data-id的父元素
        const testItem = this.closest('.test-item');
        const testId = testItem.dataset.id;
        console.log('当前选中的测试项Id:', testId);
        // 这里就可以用testId做后续操作了
    });
});

补充：如果坚持保留隐藏标签写法 #

至少要把id="TestsId"改成class="TestsId"，然后通过按钮的上下文（父元素）去定位对应元素：

btn.addEventListener('click', function() {
    const testId = this.closest('.pan-item').querySelector('.TestsId').textContent;
});

但还是更推荐data-*属性的写法，代码更简洁，也更贴合HTML的设计初衷。

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