Modals in loop始终仅显示第一幅图像

问题是,虽然按钮上的缩略图在每篇帖子中正确加载,但它们都会打开一个具有相同完整图像的模式,总是列表中的第一个。 问题是什么?

以下是我的观点:

 @model Dictionary<MyPigeons.Models.Entities.Post, List<MyPigeons.Models.Entities.PostImageGallery>>

<div class="container">
    @foreach (var item in Model)
    {
        <div class="card">
            <div class="card-body">
                <h5 class="card-title text-muted">@item.Key.UserProfile.FirstName @item.Key.UserProfile.LastName</h5>
                <h6 class="card-subtitle mb-3 text-muted">@item.Key.PostDate</h6>
                <p class="card-text">@item.Key.Content</p>

                @foreach (var itm in item.Value)
                {
                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#Modal@itm.PostImageGalleryId">
                        <img class="img-fluid img-rounded" src="~/images/PostImages/@itm.ThumbnailName" alt="Card image">
                    </button>
                    <div class="modal fade" id="Modal@itm.PostImageGalleryId" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content modal-lg">
                                <div class="modal-header">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                                <div class="modal-body">
                                    <img class="img-fluid" src="~/images/PostImages/@itm.ImageName" alt="Card image">
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</div>

项目。foreach中的值属于PostImageGallery类,如下所示:

public class PostImageGallery
{
    [Key]
    public string PostImageGalleryId { get; set; }

    public string ImageName { get; set; }
    public string ThumbnailName { get; set; }
    public string Path { get; set; }
    public DateTime AdditionTime { get; set; }

    [ForeignKey("PostForeignKey")]
    public string PostId { get; set; }
    public Post Post { get; set; }
}

我试图通过插入@itm使模态id唯一。PostImageGalleryId,但我不知道为什么浏览器将其视为纯文本,而不为其交换适当的值。下面是浏览器代码探索的屏幕。

有趣的是,在附加的屏幕上,按钮中缩略图的路径和模式中图像的路径正确渲染,但事实上,单击按钮后模式中显示的是完全不同的图像,其名称与在浏览器中查看附加代码时显示的完全不同。

这是引导程序错误吗?有没有办法绕过它?