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

时间:2018-07-20 14:37:59

标签: c# asp.net bootstrap-popover

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

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

目的是显示背后代码/服务器端代码的引导弹出窗口。这是我从后面的代码中尝试的方法,但是没有用。

C#

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

任何建议都值得赞赏。

2 个答案:

答案 0 :(得分:2)

类似声音的代码显示popover未执行,因为在尝试以ready方法调用popover('show')函数时jQuery库可能尚未加载或未处于RegisterStartupScript状态。尝试将该函数调用包装在document.ready块中:

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

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

注意:如果$('[data-toggle="popover"]').popover(...)仍未显示,请确保document.ready定义已经包装在popover块内。

类似的问题:

Show popover from code behind

bootstrap popover from code behind

答案 1 :(得分:1)

为阐明解决方案,我们发现了一点:

这是一个计时问题。我们正在尝试初始化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);