модальная итерация в цикле foreach с использованием ajax

Question

У меня проблема с циклом foreach. Что я пытаюсь сделать, это получить данные (JsonResult) из действия в контроллере. Получить получить песни для каждого альбома.

 public JsonResult SongListByAlbum(int albumID)
        {
            var songs = (from song in Song.GetSongList()
                         join album in Album.GetAlbumList()
                         on song.AlbumID equals album.AlbumID
                         where (albumID == album.AlbumID)
                         select song).ToList();

            return Json(songs,JsonRequestBehavior.AllowGet);
        }

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

@foreach (var item in Model.Albums){

                <button id="@item.AlbumID" type="button" class="btn btn-primary myModals" data-toggle="modal" data-target="#exampleModal-@item.AlbumID">
                    Show
                </button>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal-@item.AlbumID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-@item.AlbumID" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel-@item.AlbumID">@item.AlbumName @item.Year, @item.BandName</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>                           
                            <div id="parent" class="modal-body">

                            </div>
                            <div class="modal-footer">
                                <button id="closeModal"type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
}

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

   <script>

        $(".myModals").on("click", function () {
            var Id = $(this).attr('id');
            alert(Id);
            $.ajax({
                type: "GET",
                url: '@Url.RouteUrl(new{ action= "SongListByAlbum", controller="Default"})',
                data: {albumID:Id},
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {

                    for (var i in result) {         

                        $('#parent').append('<p class="toRemove">' + result[i].SongName + '</p>');                        
                    }                 
                },
                error: function (response) {
                    alert('error');
                }
            });          
        });

    </script>

Проблема в том, что когда я нажимаю первую модальную кнопку, все в порядке, я получаю то, что хочу. Но когда я нажимаю на второй, я получаю пустой модал. Затем, когда я нажимаю снова на первый, я получаю данные от предыдущего щелчка и предпоследний. Изображение: введите описание изображения здесь

Answer 1

Чтобы избежать нескольких элементов <div id="parent">, вам, вероятно, следует назначить Id так же, как вы делаете это для кнопок. Как <div id="parent-@item.AlbumID">. Тогда в вашем AJAX вызовите ссылку на правильный div. $('#parent-' + Id).

Не уверен, что это возможно только для вас, но может приблизить вас.