mvc 4，模态窗口foreach图片答案

【问题标题】：Mvc 4, Modal window foreach picturemvc 4，模态窗口foreach图片
【发布时间】：2017-02-27 13:03:40
【问题描述】：

所以我这里有图片的代码，它与第一个完美配合，但它不会更新下一个的模态。

 <a id="modal-456343" href="#modal-container-456343" role="button" class="btn" data-toggle="modal"><img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" /></a>
                    <div class="modal fade" id="modal-container-456343" 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" aria-hidden="true">
                                        ×
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        @Html.DisplayFor(modelItem => item.Overskrift)
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div>
                                        <img id="i" src="~/Images/@(item.Id).jpg" style="width:100%; height:100%">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

我希望它在单击新图片时更新或创建新的模态。大家有什么建议吗？

提前致谢。

【问题讨论】：

标签： c# jquery asp.net-mvc razor

【解决方案1】：

问题是你有重复的 id，所以它只适用于第一个，你的 html 是无效的，因为每个元素都应该有唯一的 id，只需给出唯一的 id 以使其正常工作，例如：

<a id="@("modal-"+item.Id)" href="@("#modal-container-"+item.Id)" role="button" 
   class="btn" data-toggle="modal">
    <img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="@("modal-container-"+item.Id)" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">

或者这样：

<a id="modal-@(item.Id)" href="#modal-container-@(item.Id)" role="button" 
   class="btn" data-toggle="modal">
    <img src="~/Images/@(item.Id).jpg" style="height:100px; width:100px;" />
</a>
<div class="modal fade" id="modal-container-@item.Id)" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">

【讨论】：