如何显示带有GridView中html内容的Bootstrap弹出窗口？

Question

我在这里待了两个小时，尝试各种东西。 我可以将弹出窗口显示为基本标题/内容，但是我还没有找到一种使之与HTML和Eval（）作为内容一起使用的方法。 这就是我正在使用的：

JS：

$(function () {
    $("#btnViewRefDrDetails").popover({
        html: true,
        content: function () {
            return $("#popover-content-wrapper").html();
        },
        title: function () {
            return $("#popover-title").html();
        },
        container: 'body'
    });
})

和HTML：

<asp:GridView ID="gridTOC" runat="server"
                <Columns>
                    <asp:TemplateField HeaderText="Ref Dr" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="15%">
                        <ItemTemplate>
                            <asp:LinkButton ID="btnViewRefDrDetails" runat="server" Text='<%#Eval("ReferringName") %>' data-toggle="popover"
                                title="Popover Title" ClientIDMode="Static" OnClientClick="return false" role="button" rel="popover">
                            </asp:LinkButton>
                            <%--this should be the template for the popover--%>
                            <div id="popover-content-wrapper" style="display: none;">
                                <table>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Provider Name:</b>&nbsp;</td>
                                        <td><%# Eval("ReferringName")%></td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Provider Specialty:</b>&nbsp;</td>
                                        <td><%# Eval("ProviderSpecialty")%> </td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice Name:</b>&nbsp;</td>
                                        <td><%# Eval("PracticeName")%></td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice Address:</b>&nbsp;</td>
                                        <td><%# Eval("PracticeAddress")%></td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice City:</b>&nbsp;</td>
                                        <td><%# Eval("PracticeCity")%> </td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice State:</b>&nbsp;</td>
                                        <td><%# Eval("PracticeState")%> </td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice ZIP:</b>&nbsp;</td>
                                        <td><%# Eval("PracticeZip")%> </td>
                                    </tr>
                                    <tr>
                                        <td style="white-space: nowrap;"><b>Practice Phone:</b>&nbsp;</td>
                                        <td><%# Eval("PracticePhone")%> </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="popover-title" style="display: none">
                                <%# Eval("ReferringName")%>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

当我单击LinkBut​​ton时，什么都没有发生。 没有错误，什么也没有。 当我只是硬编码弹出窗口的标题和内容时，它就可以正常工作。 做什么？

Answer 1

我不确定问题是否有多个$("#popover-content-wrapper") ，因为如果它在GridView ，我认为多于一行是正常的。

我有一个示例，说明如何在弹出窗口中显示更大的<img>

<asp:TemplateField>
    <ItemTemplate>
            <asp:Image ID="imgSignature" runat="server"  
                data-img='<%# Eval("ImgBase64")  %>' 
                data-toggle="popover"
                ImageUrl='ViewLarger.jpg' />
    </ItemTemplate>
</asp:TemplateField>

$('img[data-toggle=popover]').popover({
    html: true,
    trigger: 'hover',
    content: function () {
        return '<img width="250px" src="' + $(this).data('img') + '" />';
    }
});

如您所见，我将要传递给popover的信息保存在trigger元素的data-X属性中，并在JS函数中适当时将其放置。 你的情况应该是

<asp:TemplateField>
    <ItemTemplate>
            <asp:LinkButton ID="btnViewRefDrDetails" 
                            data-toggle="popover"
                            data-ReferringName='<%# Eval("ReferringName")%>' 
                            data-ProviderSpecialty='<%# Eval("ProviderSpecialty")%>' >
    </ItemTemplate>
</asp:TemplateField>

$('a[data-toggle=popover]').popover({
    html: true,
    trigger: 'hover',
    content: function () {
        return '<table><tr><td>Provider Name' + $(this).data('ReferringName') + '</td></tr> etc...';
    }
});