使用 ajax 在 foreach 循環中進行模態迭代

Question

我遇到了 foreach 循環的問題。 我想做的是從 controller 中的操作中獲取數據（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) 。

不確定這是否是你唯一的可能，但可能會讓你更接近。