Twitter bootstrap 将引导模式与foreach循环一起使用
我有一个foreach循环,它从数据库中循环通过我的文档,它只拉入图像,然后我的页面上每行有4个图像,我想单击一个,它打开一个带有图像的模式,再次单击另一个相同的模式。所以我有这样的设置:Twitter bootstrap 将引导模式与foreach循环一起使用,twitter-bootstrap,model-view-controller,modal-dialog,Twitter Bootstrap,Model View Controller,Modal Dialog,我有一个foreach循环,它从数据库中循环通过我的文档,它只拉入图像,然后我的页面上每行有4个图像,我想单击一个,它打开一个带有图像的模式,再次单击另一个相同的模式。所以我有这样的设置: @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-m
@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>
}
@foreach(Model.DocumentList中的变量项)
{
//下面,我目前只使用modal的ID(我知道这是错误的)
@Html.DocumentUrl(item.FileUrl,false)
@item.CreatedDate.ToShortDateString()
&接近
上传-@item.CreatedDate.ToShortDateString()
@Html.DocumentUrl(item.FileUrl,true)
@item.FileDescription
接近
下载
}
我可以理解为什么数据目标id模式不起作用,当我将其悬停时,我会看到不同的标题,但是当我单击img时,即使我单击img 4,它也只会显示第一个img、第一个标题等。我如何才能做到这一点,以便它能正确地处理每个项目?同样,将id模式更改为类也没有帮助。在您的特定解决方案中,您对Model.DocumentList中的每个项目使用相同的模式代码段。例如:
<a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription"> @Html.DocumentUrl(item.FileUrl, false)</a>
<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>
@Html.DocumentUrl(item.FileUrl,false)
如果始终使用myModal id切换模式。每当您单击DocumentUrl时,页面呈现的第一个模式就是胜出。实际上,您正在创建4个相同的模式,唯一的区别是Url和项目,因此您正在经历奇怪的行为
为了完成您试图完成的任务(至少在处理问题的方式上),您可以通过将id与项目的值连接起来,在每个模式上使用唯一的id。例如:
<a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription"> @Html.DocumentUrl(item.FileUrl, false)</a>
<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>
@Html.DocumentUrl(item.FileUrl,false)
通过使用模型的id off,您将为Model.Document列表中的每个项目生成一个唯一的HTML模式,并生成一个要匹配的唯一数据目标。这将通过使用4个单独的模态来完成您试图完成的任务
如果您以后想重构,可以提供一个小的替代建议。您可以始终在页面上加载单个模式,并使用JavaScript修改该模式的主体。这将只使用一个模态而不是4个单独的模态片段来清理HTML。例如,您可以在页面中加载一个空模式,并使用循环生成具有正确数据模式的链接。这样你的代码是干的,你的HTML是干净的
快乐编码