使用jQuery Ajax调用Controller方法时，如何获取不同产品按钮的ID？

核心问题 #

你当前的代码存在两个关键错误：

1. HTML中id属性必须唯一，循环生成多个id="submitButton"的按钮，会导致jQuery只能匹配到第一个元素
2. 点击事件中固定获取#submitButton的value，无法区分当前点击的是哪个产品的按钮

修正方案 #

1. 修正Razor视图的按钮代码

把重复的id替换为统一的class，保留每个按钮的value绑定对应ProductId：

@foreach (var produkt in ViewBag.OnePageOfProducts){    
    <button class="add-to-cart-btn" value="@produkt.ProductId">Add to Cart</button>
}

2. 修正jQuery Ajax代码

绑定class的点击事件，通过$(this)获取当前点击按钮的value，同时调整变量作用域：

<script>
    $(document).ready(function () {
        var quantity = 1;

        // 绑定所有添加按钮的点击事件
        $('.add-to-cart-btn').click(function () {
            // 获取当前点击按钮对应的ProductId
            var id = $(this).val();
            
            $.ajax({
                type: "POST",
                url: '@Url.Action("AddToCart2", "Cart")',
                data: { id: id, quantity: quantity },
                success: function (result) {
                    $("#mydiv").load(location.href + " #mydiv");
                },
                error: function (abc) {
                    alert(abc.statusText);
                },
            });
        });
    });
</script>

关键说明 #

• 使用class而非id来批量选择按钮，彻底避免重复id的冲突问题
• $(this)在点击事件中代表当前被触发的按钮，能准确获取对应产品的ProductId
• 将id变量声明在点击事件内部，确保每次点击都获取最新的当前按钮值

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