从服务器端使用弹出窗口时的 BlockUI

Question

我正在使用 UpdatePanel 在一个较长的过程中阻止 UI，我的问题是当我放置一个简单的按钮时它可以工作，但是当按钮在弹出窗口中时它不起作用（在不阻塞 ui).

的情况下，简单地卡住直到过程完成

有效代码：

<asp:UpdatePanel runat="server" ID="updatePanel">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="lb_start" />
  </Triggers>
  <ContentTemplate>
      <asp:UpdateProgress runat="server" ID="upprogress" AssociatedUpdatePanelID="updatePanel" DisplayAfter="0">
            <ProgressTemplate>
                <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                    <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/iguloader-yashar.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed; top: 45%; left: 50%;" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:LinkButton runat="server" ID="lb_start" class="btn btn-success" OnClick="lb_start_Click"><i class="fa fa-start"></i> Start</asp:LinkButton>            
  </ContentTemplate>
</asp:UpdatePanel>

服务器端：

protected void lb_start_Click(object sender, EventArgs e)
{
    //long process
}

无效的代码（使用 colorbox.js）：

<asp:UpdatePanel runat="server" ID="updatePanel">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="lb_start" />
  </Triggers>
  <ContentTemplate>
      <asp:UpdateProgress runat="server" ID="upprogress" AssociatedUpdatePanelID="updatePanel" DisplayAfter="0">
            <ProgressTemplate>
                <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                    <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/iguloader-yashar.gif" AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed; top: 45%; left: 50%;" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <a runat="server" id="a_start" class="inline" href="#startModal" title="Start scan"><span  class="btn btn-success"><i class="fa fa-play"></i></span></a>        
  </ContentTemplate>
</asp:UpdatePanel>

<div id="startModal" style="padding:10px; background:#fff;">
    <h2>Start Scan</h2>
    Click ok to continue:
        <asp:LinkButton runat="server" ID="lb_start" class="btn btn-success" OnClick="lb_start_Click"><i class="fa fa-start"></i> Start</asp:LinkButton>
</div>

试了一下，有什么想法吗？

Answer 1

您可以使用称为 blockui 的 jQuery 插件完成此任务（足够有趣）。

这link这里显示了一个例子：https://gist.github.com/whoshotjr/3010693

只需包含 http://malsup.com/jquery/block/

提供的 jquery.blockui.js

然后在您的项目中包含此代码：

<script type="text/javascript">
        Page = Sys.WebForms.PageRequestManager.getInstance();
        Page.add_beginRequest(OnBeginRequest);
        Page.add_endRequest(endRequest);

        function OnBeginRequest(sender, args) {
            $.blockUI();
        }
        function endRequest(sender, args) {
            $.unblockUI();
        }

 </script>

由于您是运行客户端，因此在执行 Web 请求时几乎总是必须使用 Javascript 来阻止 UI。我在 MVC 中使用了与此类似的设置，但最终都是一样的。希望这对您有所帮助！

从服务器端使用弹出窗口时的 BlockUI

BlockUI when using a popup from serverside

asp.net

jquery

colorbox