BlockUI quando si utilizza un popup da serveride

Question

Sto usando un UpdatePanel per bloccare l'interfaccia utente in un lungo processo, il mio problema è che funziona quando inserisco un semplice pulsante, ma quando il pulsante è all'interno di un popup non funziona (rimane semplicemente bloccato fino a che il processo non viene eseguito senza bloccare l'interfaccia utente).

codice che funziona:

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

lato server:

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

codice che non funziona (Usi 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> 

ha provato a giocare con un piccolo, qualche idea?

Answer 1

È possibile eseguire questa operazione utilizzando un plug-in jQuery noto come blockui (abbastanza divertente).

Questo link qui mostra un esempio: https://gist.github.com/whoshotjr/3010693

Semplicemente includono le jquery.blockui.js disponibili da http://malsup.com/jquery/block/

quindi includere questo codice nel progetto:

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

Dal momento che si esegue lato client dovresti quasi sempre usare Javascript per bloccare l'interfaccia utente mentre esegui una richiesta web. Ho usato un setup simile a questo in MVC ma alla fine è lo stesso. Spero che questo ti aiuti!