使用 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) 。

不确定这是否是你唯一的可能，但可能会让你更接近。