從服務器端使用彈出窗口時的BlockUI

我正在使用UpdatePanel來阻止長時間進程的UI，我的問題是當我放置一個簡單的按鈕時有效，但是當按鈕位於彈出窗口內時，它不起作用（簡單地卡住，直到過程完成而不會阻塞ui）。該工程從服務器端使用彈出窗口時的BlockUI

代碼：

<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>

試圖用它玩小，任何想法？

來源

2015-06-07 omriman12

目前還不清楚您想要點擊哪個按鈕以及期望的結果/問題是什麼。 – Paddy

你有一個按鈕，然後更新面板上有一個鏈接。發生了什麼？你是否點擊鏈接，然後用按鈕覆蓋面板？當你點擊按鈕時你想要發生什麼？ - 你想讓面板覆蓋消失嗎？ – Paddy

您可以使用稱爲blockui的jQuery插件（足夠有趣）來完成此任務。

這裏這個鏈接給出了一個例子：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>

既然你正在運行客戶端，你幾乎總是必須使用Javascript來阻止用戶界面，同時執行Web請求。我在MVC中使用過類似的設置，但最後它們都是一樣的。希望這可以幫助！

來源

2015-06-10 14:02:30

做得好，最後這麼簡單的回答，你會想我會在第一次得到這個答案的時候我問這個簡單的問題 – omriman12

沒問題，很高興我能幫上忙。我會盡快回答，但在停機後我剛回到SO。 –

從服務器端使用彈出窗口時的BlockUI

回答

相關問題