使用带有 foreach 循环的 Bootstrap 模式 [英] Using Bootstrap Modal with a foreach loop

问题描述

我有一个 foreach 循环，它从数据库中循环遍历我的文档，它只提取图像然后我的页面上每行有 4 个图像，我想单击一个它打开带有图像的模态，单击另一个同样的.所以我有这个设置:

I have a foreach loop which loops through my documents from a database, it only pulls in the IMAGES then I have a 4 images per row on my page, I would like to click one it opens a Modal with the image, click another same again. So i have this setup:

@foreach (var item in Model.DocumentList)
{
    // Below I am currently using just a ID for modal (which i know is wrong)
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription">
            @Html.DocumentUrl(item.FileUrl, false)
        </a>
        <span class="col-xs-12" style="text-align:center;">@item.CreatedDate.ToShortDateString()</span>
    </div>       
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Uploaded - @item.CreatedDate.ToShortDateString()</h4>
                </div>
                <div class="modal-body">
                    @Html.DocumentUrl(item.FileUrl, true)
                    <div class="row">
                        <div class="col-md-12">
                            <p>
                                @item.FileDescription
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn banner-background white-text">Download</button>
                </div>
            </div>
        </div>
    </div>
}

我可以看到为什么 data-target id 模式不起作用，当我悬停它时我看到不同的标题，但是当我点击 img 即使我点击 img 4 它也只显示第一个 img，第一个标题等我怎样才能做到这一点，以便它与每个项目正常工作?将 id modal 更改为 class 也无济于事.

I can see why the data-target id modal isn't working, when I hover it works i see the different title, however when I click the img even if I click img 4 it just shows the first img, first title etc. How can I do this so it works with each item properly? Also changing id modal to a class doesn't help either.

推荐答案

在您的特定解决方案中，您为 Model.DocumentList 中的每个项目使用相同的模式片段.例如:

In your particular solution you are using the same modal snippet for each item in your Model.DocumentList. For example:

<a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription"> @Html.DocumentUrl(item.FileUrl, false)</a>

如果总是切换 id 为 myModal 的模式.每当您单击 DocumentUrl 时，页面呈现的第一个模式就会胜出.您实际上是在创建 4 个相同的模式，唯一的区别是 Url 和 Item，因此您遇到了奇怪的行为.

If always toggling the modal with an id of myModal. The first modal the page renders is winning out whenever you click the DocumentUrl. You are essentially creating 4 of the same modal with the only differentiator being the Url and Item, and because of this you're experiencing the strange behavior.

要完成您想要完成的事情(至少在您解决问题的方式上)，您可以通过将 id 与您的项目的值连接起来，在每个模式上使用一个唯一的 id.例如:

To accomplish what you're trying to accomplish (at least in the way that you are approaching the problem), you could utilize a unique id on each modal by concatenating the id with a value off of your item. For example:

<a class="thumbnail" data-toggle="modal)" data-target="#myModal-@(item.id)" title="@item.FileDescription"> @Html.DocumentUrl(item.FileUrl, false)</a>

<div class="modal fade" id="myModal-@(item.id)" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><!-- modal body etc --></div>

通过使用模型的 id，您将为 Model.Document 列表中的每个项目生成一个唯一的 HTML 模式和一个唯一的数据目标来匹配.这将通过使用 4 个单独的模态来完成您尝试做的事情.

By using the id off of the Model you will generate a unique HTML modal for each item in your Model.Document list and a unique data-target to match. This would accomplish what you're trying to do by using 4 seperate modals.

如果您想稍后重构它，请提供一个小的替代建议.您始终可以在页面上加载单个模态并使用 JavaScript 修改模态的主体.这将通过仅使用单个模态而不是 4 个单独的模态片段来清理 HTML.例如，您将在页面中加载一个空模式并使用循环生成具有正确数据属性的链接.这样你的代码是 DRY 并且你的 HTML 是干净的.

A small alternative suggestion if you feel like refactoring this later. You could always load a single modal on the page and use JavaScript to modify the modal's body. This would clean up the HTML by using only a single modal rather than 4 seperate modal snippets. You would load an empty modal in your page for example and use the loop to generate the links with the proper data-atteributes. This way your code is DRY and your HTML is clean.

编码愉快！

这篇关于使用带有 foreach 循环的 Bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！