在 mvc 视图页面中，id 值始终与 foreach 相同

Question

我正在为一个项目使用 mvc .net core，并且我有一个视图页面。我需要此页面中的一些 id 值才能在局部视图中使用它们。因为我在另一个 table 到 post 中将这些 id 值用作外键。从主页上这些值 posts 在数据库中正确。我在检查时看到的数据库中总是 post 5 个值和 5 个 id。但是当我点击手风琴时，这个 id 总是从这 5 个值变成第一个 id。如果我 post 编辑为 6,7,8,9,10 它只会变成 6，而且我点击页面中的最后一个或第一个都没有关系。但是当我从数据库和页面中检查它时，上下文和标题总是正确的。

我尝试了一些 jquery 代码，但它们无法正常工作。当我点击其他手风琴时，我需要正确的 id 值。

我很乐意提供任何帮助。非常感谢。

这是我的代码：

@model IEnumerable<match>

@{
    ViewData["Title"] = "Home Page";

}
<head>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
 
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

            .active, .accordion:hover {
                background-color: #ccc;
            }

        .panel {
            padding: 0 18px;
            display: none;
            background-color: white;
            overflow: hidden;
        }
    </style>

</head>
<body>

    <h4>Title List:</h4>
    <table class="table table-hover">
        @foreach (var item in Model)
        {
            <tr class="yzt">
                <td class="xyz" id="item_title" >
                   
                    <button class="accordion" id="title" >@Html.DisplayFor(modelItem => item.title)</button>
                    <div class="panel">
                        <p id="modelId" hidden>@Html.DisplayFor(modelItem=>item.Id)</p>
                        <p>@Html.DisplayFor(modelItem => item.context)</p>

                        @await Html.PartialAsync("Create", item.Exams@*, Exams*@)
                    </div>
                </td>
            </tr>
        }
    </table>
    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
        
        //document.querySelectorAll('.accordion').forEach(link => this.addEventListener('click', myFunction))

        //function myFunction() {
        //    document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
        //    console.log("value is" + document.getElementById("matchId").value);

        //}

        document.querySelectorAll('.panel').forEach(link => this.addEventListener('click', myFunction))

        function myFunction() {
            document.getElementById("matchId").value = document.getElementById("modelId").innerHTML;
            console.log("value is" + document.getElementById("matchId").value);

        }

        //document.querySelectorAll(".accordion")
        //document.getElementById("match_title").value = document.getElementById("title").innerHTML;

    </script>
</body>

Answer 1

我推荐你这样写：

<div class="panel" id=@item.Id onclick="test(@item.Id)">

function test(val){
    alert(val);
}

您的代码将创建多个 ID 为“title”的多个

，ID 为“modelId”的多个

，这也是为什么您总是从第一项获取 ID 的原因，即您所写的 document.getElementById("modelId").innerHTML 将始终获得第一个 dom 元素，其中 id = "modelId"

在 mvc 视图页面中，id 值始终与 foreach 相同

id values turns always same from foreach in mvc view page

javascript

asp.net-core-mvc

asp.net-core