ASP.NET Core MVC中AJAX传值异常：点击不同收藏按钮ID始终为1

核心错误原因 #

• 重复ID冲突：你在foreach循环里给每个隐藏输入框都设置了相同的id="houseid"，同时收藏按钮也重复使用id="favorite"。HTML规范要求页面元素的ID必须唯一，document.getElementById("houseid")只会返回页面中第一个匹配该ID的元素，所以无论点击哪个按钮，取到的都是第一个房源的ID。

修复方案（三种可选） #

方案一：通过元素上下文关联对应ID

修改视图和脚本，利用按钮的父容器查找对应隐藏框：

@foreach (var item in Model)
{
    <div>
        <!-- 把ID改为类名，避免重复 -->
        <input class="houseid" type="hidden" value="@item.id">
        <!-- 点击时传递当前按钮元素到函数 -->
        <a href="#" class="phone_number favorite" onclick="favoritefunction(this)">收藏</a>
    </div>
}

<script>
function favoritefunction(btn) {
    // 通过按钮的父元素找到对应的隐藏框
    var id = btn.parentElement.querySelector(".houseid").value;
    var xhttp = new XMLHttpRequest();
    xhttp.open("Get", "/Home/ajaxRent?id=" + id, true);
    xhttp.send();
    alert("favorite added successfully");
}
</script>

方案二：用数据属性直接绑定ID（更简洁）

去掉隐藏框，把房源ID直接存在按钮的自定义数据属性中：

@foreach (var item in Model)
{
    <div>
        <!-- 用data-houseid存储房源ID -->
        <a href="#" class="phone_number favorite" onclick="favoritefunction(this)" data-houseid="@item.id">收藏</a>
    </div>
}

<script>
function favoritefunction(btn) {
    // 直接读取按钮的data属性值
    var id = btn.dataset.houseid;
    var xhttp = new XMLHttpRequest();
    xhttp.open("Get", "/Home/ajaxRent?id=" + id, true);
    xhttp.send();
    alert("favorite added successfully");
}
</script>

方案三：事件委托（推荐，适合大量数据场景）

避免在循环内绑定多个点击事件，通过父容器统一监听，性能更优：

<!-- 给列表加一个父容器 -->
<div id="favorite-container">
    @foreach (var item in Model)
    {
        <div>
            <a href="#" class="phone_number favorite" data-houseid="@item.id">收藏</a>
        </div>
    }
</div>

<script>
// 给父容器绑定点击事件
document.getElementById("favorite-container").addEventListener("click", function(e) {
    // 判断点击的是收藏按钮
    if (e.target.classList.contains("favorite")) {
        var id = e.target.dataset.houseid;
        var xhttp = new XMLHttpRequest();
        xhttp.open("Get", "/Home/ajaxRent?id=" + id, true);
        xhttp.send();
        alert("favorite added successfully");
    }
});
</script>

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