ASP.NET MVC循环渲染卡片按钮仅首个生效 如何统一调用相同函数

核心错误原因 #

HTML 规范要求 id 属性全局唯一，你在循环中生成了6个相同id为btnNewSave的按钮、以及6个相同id为getValue的隐藏输入框，jQuery 的 #id 选择器只会匹配页面中第一个符合条件的元素，因此只有第一个卡片的按钮绑定了点击事件，取值时也只会取第一个卡片的id。

修改步骤 #

1. 调整视图层代码 #

移除重复id，改用class标识按钮，直接将对应训练项的id存入按钮的data-*自定义属性，不需要额外加隐藏输入框：

<h2>Our workouts</h2>
<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="~/Content/not-found-image.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div class="textButton">
                            <a class="btn btn-primary btnNewSave" data-id="@item.Id">Go to anywhere</a>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

2. 调整脚本代码 #

改用class选择器绑定所有按钮的点击事件，通过$(this)获取当前点击的按钮，读取其携带的id参数，同时跳转时需要把id拼到目标地址中，否则跳转后的页面无法拿到对应参数：

@section scripts {
    <script>
        $(document).ready(function () {
            // 给所有class包含btnNewSave的按钮绑定点击事件
            $(".btnNewSave").click(function () {
                // 获取当前点击按钮绑定的训练项id
                var currentId = $(this).data("id");
                $.ajax({
                    type: "GET",
                    url: '/TrainingType/ListCoach',
                    data: { id: currentId },
                    success: function (res) {
                        console.log(res);
                        // 跳转时携带id参数
                        window.location.href = '/TrainingType/ListCoach?id=' + currentId;
                        return res;
                    },
                    error: function () {
                        $("#loader").fadeOut("slow");
                        console.log("error1");
                    }
                });
            });
        });
    </script>
}

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