Question

我做了一个循环，用于在用户中显示按钮作为缩略图。帖子。点击这样的微型按钮后，Bootstrap（4.0）模态显示完整的图像。

问题是，虽然按钮上的缩略图在每个帖子中正确加载，但它们都打开一个具有相同完整图像的模态，始终是列表中的第一个。有什么问题？

以下是我的观点：

 @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中的item.Value属于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.PostImageGalleryId来使模态ID唯一，但我不知道为什么浏览器将其视为纯文本并且没有交换正确的值为了它。 Bellow是浏览器代码探索的屏幕。

有趣的是，在附加的屏幕上，按钮中的缩略图的路径和模态中的图像正确呈现，但实际上，单击按钮后模式中的图形是完全不同的图像，具有完全不同的名称比在浏览浏览器中的代码时所显示的那样。

这是一个Bootstrap错误吗？任何想法如何绕过它？

Answer 1

这与bootstrap无关，您使用错误的razor语法分配唯一ID。通常在剃刀中，当您使用字符串编写c＃代码时，该代码将被视为字符串。一个简单的解决方案是将c＃代码包装在@(<your-c#-code>)中。因此，您需要分配如下唯一ID：

... data-target="#Modal@(itm.PostImageGalleryId)" ...

和

... id="Modal@(itm.PostImageGalleryId)"...

循环显示的模态始终只有第一个图像

1 个答案: