如何从 GridView 显示带有 html 内容的 Bootstrap 弹出框?
How can I display a Bootstrap popover with an html content from a GridView?
我已经在这里工作了大约两个小时,现在正在尝试各种东西。我可以让弹出窗口显示为基本的 title/content,但我还没有找到一种方法让它与 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> </td>
<td><%# Eval("ReferringName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Provider Specialty:</b> </td>
<td><%# Eval("ProviderSpecialty")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Name:</b> </td>
<td><%# Eval("PracticeName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Address:</b> </td>
<td><%# Eval("PracticeAddress")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice City:</b> </td>
<td><%# Eval("PracticeCity")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice State:</b> </td>
<td><%# Eval("PracticeState")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice ZIP:</b> </td>
<td><%# Eval("PracticeZip")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Phone:</b> </td>
<td><%# Eval("PracticePhone")%> </td>
</tr>
</table>
</div>
<div id="popover-title" style="display: none">
<%# Eval("ReferringName")%>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
当我点击 LinkButton 时,什么也没有发生。没有错误,什么都没有。当我只是对弹出窗口的标题和内容进行硬编码时,它工作正常。做什么?
我不确定问题是不是多了一个$("#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') + '" />';
}
});
如您所见,我将要传递给弹出框的信息保存在触发器元素的 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...';
}
});
我已经在这里工作了大约两个小时,现在正在尝试各种东西。我可以让弹出窗口显示为基本的 title/content,但我还没有找到一种方法让它与 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> </td>
<td><%# Eval("ReferringName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Provider Specialty:</b> </td>
<td><%# Eval("ProviderSpecialty")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Name:</b> </td>
<td><%# Eval("PracticeName")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Address:</b> </td>
<td><%# Eval("PracticeAddress")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice City:</b> </td>
<td><%# Eval("PracticeCity")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice State:</b> </td>
<td><%# Eval("PracticeState")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice ZIP:</b> </td>
<td><%# Eval("PracticeZip")%> </td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Practice Phone:</b> </td>
<td><%# Eval("PracticePhone")%> </td>
</tr>
</table>
</div>
<div id="popover-title" style="display: none">
<%# Eval("ReferringName")%>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
当我点击 LinkButton 时,什么也没有发生。没有错误,什么都没有。当我只是对弹出窗口的标题和内容进行硬编码时,它工作正常。做什么?
我不确定问题是不是多了一个$("#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') + '" />';
}
});
如您所见,我将要传递给弹出框的信息保存在触发器元素的 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...';
}
});