如何从代码后台显示Bootstrap弹出窗口？

Question

我有一个按钮，可以打开bootstrap弹出框。以下是标记代码：

 <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')
  });

目标是从代码后端/服务器端显示bootstrap弹出框。以下是我尝试的从代码后端实现但没有成功的方法。

C#

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

任何建议都非常感激。

- Susan JOshi

Answer 1

看起来像是因为jQuery库可能没有加载或者在调用RegisterStartupScript方法时不在ready状态，导致代码没有执行显示popover。尝试将该函数调用包裹在document.ready块中：

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

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

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

类似问题：

从代码后端显示弹出框

从代码后端使用Bootstrap弹出框

- Tetsuya Yamamoto

---

谢谢您的建议。是的，我完全同意您的观点。我们已经解决了这个问题。像您提到的那样，jquery（popover）内部的内容没有处于就绪状态/未初始化。我的同事link@JBizzle提出了解决方案。我将在下一个评论中发布解决方案。 - Susan JOshi

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); - Susan JOshi

Answer 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);

- JBLearnsCode