中继器 ASP.Net 内的引导模式答案

【问题标题】：Bootstrap modal inside the repeater ASP.Net中继器 ASP.Net 内的引导模式
【发布时间】：2021-03-30 01:31:57
【问题描述】：

我正在尝试以模式显示来自转发器的信息。我的示例代码正在运行。

<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
                            <HeaderTemplate>
                                <table class="table table-striped">
                            <thead class="bg-secondary text-info">
                                <tr>
                                    <th>Name</th>
                                    <th>Type of Membership</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td><button type="button" class="btn btn-link" id="memberNameList" 
                                        data-toggle="modal" data-target="#memberDetailsModal" runat="server"></button></td>
                                    <td><asp:Literal id="typeOfMembershipList" runat="server"></asp:Literal></td>
                                    
                                </tr>
                                <div class="modal fade" role="dialog" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header border-bottom-0">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-title text-center">
                                                    <h3 class="font-weight-bold" id="memberName" runat="server">Member Name</h3>
                                                   <p class="font-weight-bold mb-0" id="typeOfMembership" runat="server">General Member</p>
                                                </div>
                                               
                                            </div>

                                        </div>

                                    </div>
                                </div>

                            </ItemTemplate>
                            <FooterTemplate>
                                </tbody>
                        </table>
                            </FooterTemplate>
</asp:Repeater>

我可以在多行的表中从数据库中获取所有数据。但是，当我单击任何行中的按钮以弹出模式时，它仅在模式中显示来自第一行的信息。我明白了，模态只绑定第一行的信息。我不知道为什么。

【问题讨论】：

为什么要在中继器中放置一个模式？您认为 Modal 的 ID id="memberDetailsModal 会发生什么？
其实我并没有使用modal的id。

标签： asp.net bootstrap-4 bootstrap-modal repeater

【解决方案1】：

您可以对每一行使用相同的模式。使用 HTML data-* 属性将值传递给模态，然后，您可以使用 jQuery 获取数据并动态修改模态。

Bootstrap Docs: Varying modal content

【讨论】：