如何为 IEnumerable 中的每个项目打开一个唯一的模式

Posted 2023-03-05

【中文标题】如何为 IEnumerable 中的每个项目打开一个唯一的模式

【英文标题】：How to open a unique modal for each item in IEnumerable

【发布时间】：2020-09-14 16:47:53

【问题描述】：

我的视图中有一个 IEnumerable 数据正在循环，每个项目都有一个“更多信息”按钮，该按钮会弹出一个模式，该模式应包含每个项目特定的数据。现在，无论我点击哪个项目的按钮，我都会得到列表中第一个项目的属性。

打开模态按钮后的代码如下所示：

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            </div>
            <div class="modal-body">
                @item.Property1 // showing as the same for each item
            </div>

【参考方案1】：

其中一个可能的原因是，您在模态列表的每个项目中都使用了相似的 id（即“exampleModal”）。您应该在 id 中附加一些独特的东西来定义您的项目。像这样改变：

<div class="modal" id="[e-mail]1" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">                                                                
        </div>
        <div class="modal-body">
            @item.Property1 // showing as the same for each item
        </div>
    </div>
</div>

这样，模态将被唯一标识。

【讨论】：

感谢您的回答。我尝试这样做，不幸的是，当以这种方式分配 id 时，模式不会打开。我仔细检查了目标和模式 id 是否匹配，但无论出于何种原因，它仍然无法打开。我最终使用了一个向下滑动的 div 来显示内容，它按预期工作。我知道我本可以让它与 Ajax 一起工作，但对于已经渲染的数据来说，这似乎有点过头了。