BlockUI przy użyciu popup z serwera

Question

Używam UpdatePanel do blokowania interfejsu użytkownika w długim procesie, mój problem, który działa po włożeniu prostego przycisku, ale gdy przycisk jest w popup, to nie działa (po prostu utknie, dopóki proces nie zostanie zakończony bez blokowania interfejsu użytkownika).

kod, który działa:

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

po stronie serwera:

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

kod, który nie działa (Używa 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> 

Próbowałem grać z nim w mało, Jakieś pomysły?

Answer 1

Możesz wykonać to zadanie za pomocą wtyczki jQuery znanej jako blockui (co jest zabawne).

Ten link tutaj pokazuje przykład: https://gist.github.com/whoshotjr/3010693

prostu włączyć jquery.blockui.js dostępne od http://malsup.com/jquery/block/

Wtedy to ten kod w swoim projekcie:

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

Ponieważ używasz po stronie klienta prawie zawsze musisz używać Javascript do blokowania interfejsu użytkownika podczas wykonywania żądania internetowego. Użyłem podobnej konfiguracji do tego w MVC, ale w końcu to wszystko jest takie samo. Mam nadzieję że to pomoże!