如何从后面的代码中显示引导弹出窗口？答案

【问题标题】：How to show the bootstrap popover from the code behind?如何从后面的代码中显示引导弹出窗口？
【发布时间】：2018-07-20 14:37:58
【问题描述】：

我有一个打开引导弹出窗口的按钮。这是标记。

 <HeaderStyle Width="6%"></HeaderStyle>
      <ItemTemplate>
        <asp:LinkButton runat="server" ID="button1" data-toggle="popover" CssClass="btn btn-primary" Text="Button1" />
      </ItemTemplate>

Javascript：

  $('[data-toggle="popover"]').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    content: $('#testDiv')
  });

目的是从后台代码/服务器端代码显示引导弹出窗口。这是我从无效的代码中尝试的。

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#testDiv').popover('show'); ", true);

非常感谢任何建议。

【问题讨论】：

标签： c# asp.net bootstrap-popover

【解决方案1】：

听起来像是显示popover 未执行的代码，因为当尝试在RegisterStartupScript 方法中调用popover('show') 函数时，jQuery 库可能尚未加载或未处于ready 状态。尝试将该函数调用包装在 document.ready 块中：

string script = "$(function() { $('#testDiv').popover('show'); });"

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", script, true);

注意：如果popover 仍然没有出现，还要确保$('[data-toggle="popover"]').popover(...) 定义已经包含在document.ready 块中。

类似问题：

Show popover from code behind

bootstrap popover from code behind

【讨论】：

感谢您的建议。是的，我完全同意你对此的看法。我们解决了这个问题。 jquery（弹出窗口）中的内容未处于就绪状态/未像您提到的那样初始化。我的同事link@JBizzle 提出了解决方案。我将在下一条评论中发布解决方案。
ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#" + button.ClientID + "').popover({ html: true, content: $('#actionButtonDiv'), container: 'body', trigger: 'focus', placement: 'left'});", true); ScriptManager.RegisterStartupScript(this, GetType(), "show", "$('#" + button.ClientID + "').popover('show');", true);

【解决方案2】：

为了澄清我们找到的解决方案：

这是一个时间问题。我们试图在 JavaScript 中初始化弹出框。我们是这样写的：

$('[data-toggle="popover"]').popover({
    placement: 'left',
    trigger: 'click',
    html: true,
    content: $('#testDiv')
  });

在对Sys.Application.add_load() 的调用中。问题是当我们从服务器显示弹出框时，弹出框还没有初始化，因为客户端上的任何东西都会在服务器完成后执行。解决方案是将初始化和调用都移动到服务器端按钮单击事件处理程序内部，以确保它们已被初始化，然后以正确的顺序显示。

在按钮事件中，C#：

ScriptManager.RegisterStartupScript(this, GetType(), "popoverscript", "$('#" + 
button.ClientID + "').popover({ html: true, content: $('#actionButtonDiv'), 
container: 'body', trigger: 'focus', placement: 'left'});", true); 

ScriptManager.RegisterStartupScript(this, GetType(), "show", "$('#" + button.ClientID 
+ "').popover('show');", true);

【讨论】：