使用带有foreach循环的Bootstrap Modal

Question

我有一个foreach循环从数据库循环我的文档,它只拉入IMAGES然后我在页面上每行有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-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>
}

我可以看到为什么数据目标id模态不起作用,当我悬停它工作我看到不同的标题,但是当我点击img即使我点击img 4它只显示第一个img,第一个标题等.我可以这样做,所以它适用于每个项目吗？将id模态更改为类也无济于事.

Answer 1

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

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

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

要完成你想要完成的任务(至少以你接近问题的方式),你可以通过将id连接到项目的值来利用每个模态上的唯一ID.例如:

<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个单独的模态来完成您尝试做的事情.

如果您想稍后重构,可以选择一个小的替代建议.您总是可以在页面上加载单个模态并使用JavaScript来修改模态的主体.这将通过仅使用单个模态而不是4个单独的模式片段来清理HTML.例如,您可以在页面中加载一个空模态,然后使用循环生成具有正确数据的链接atteributes.这样你的代码就干了,你的HTML很干净.

快乐的编码!