将Bootstrap Modal与foreach循环一起使用 [英] Using Bootstrap Modal with a foreach loop
问题描述
我有一个foreach循环,该循环从数据库中循环遍历我的文档,它仅拉入IMAGES,然后我的页面上每行有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">×</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>
}
我可以看到为什么数据目标ID模式不起作用,当我将其悬停时,我会看到不同的标题,但是,即使单击img 4,单击img也会显示第一个img,第一个标题等等.我该如何做才能使其与每个项目正确配合?同样,将id模态更改为类也无济于事.
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>
通过使用Model的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.
快乐编码!
这篇关于将Bootstrap Modal与foreach循环一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!