Значения id всегда совпадают с foreach на странице просмотра mvc

Я использую ядро ​​​​mvc .net для проекта, и у меня есть страница просмотра. Мне нужны некоторые значения идентификатора с этой страницы для использования их в частичном представлении. Потому что я использую эти значения идентификатора для внешнего ключа в другой таблице для публикации. С главной страницы эти значения корректно публикуются в базе данных. Я всегда публикую 5 значений и всегда 5 идентификаторов в базе данных, которые я видел, когда проверял. Но когда я нажимаю на аккордеон, этот идентификатор всегда становится первым идентификатором из этих 5 значений. если я разместил как 6,7,8,9,10, мне просто станет 6, и не имеет значения, щелкнул ли я последний на странице или первый. Но контекст и заголовок всегда верны, когда я проверяю его из базы данных и со страницы.

Я пробовал несколько кодов jquery, но они работали неправильно. Мне нужны правильные значения идентификатора, когда я нажимаю другие аккордеоны.

Буду рад любой помощи. Большое спасибо.

Вот мой код:

@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>

@TinyWang Я обязательно. Но на самом деле я не мог взять это значение из моего метода post в actionresult. Я не знаю, что не так, но он равен нулю. Имена asp-for и id такие же, как у модели, и это первый код. Он работает на консоли, также я проверял.

gokce 08.04.2022 10:04

Я думаю, вам лучше обновить больше кода в этом вопросе, чтобы мы могли помочь вам устранить неполадки. И вы также можете создать новый вопрос, если хотите, чтобы больше участников помогали с вашим вопросом, потому что самый новый вопрос привлечет больше внимания.

Tiny Wang 08.04.2022 10:34

@TinyWang спасибо :) Я выбрал ваше решение и применил его. он работает на консоли и работает для первого элемента в списке в результате действия. но не для других. Я подниму новый вопрос. пожалуйста, взгляните на новый, а также. Большое спасибо!

gokce 08.04.2022 14:06

Конечно я буду : )

Tiny Wang 08.04.2022 15:43

привет @TinyWang мне еще никто не ответил. не могли бы вы взглянуть, когда у вас будет время. Спасибо! вот вопрос stackoverflow.com/questions/71799621/…

gokce 09.04.2022 16:45
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
1
5
41
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я рекомендую вам писать так:

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

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

Ваш код создаст несколько идентификаторов "title" и несколько

имея идентификатор «modelId», и это также причина, по которой вы всегда получаете идентификатор из первого элемента, то, что вы пишете, всегда будет получать первый элемент dom, у которого id = «modelId»

enter image description here

Большое спасибо! как я не мог подумать, что на самом деле.. Мне нужно больше работать над домом, я думаю.

gokce 07.04.2022 12:30

Другие вопросы по теме