BlockUI

Question

serverde bir pop-up kullanırken uzun bir süreçte UI'yi engellemek için bir UpdatePanel kullanıyorum, basit bir düğme koyduğumda çalıştığım sorunum, ancak düğme bir pop-up içinde olduğunda işe yaramıyor (işlemin, ui'yi engellemeden yapıldığı sürece takılır). işleri

Kodu:

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

Sunucu tarafı: çalışmıyor

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

Kodu (colorbox.js kullanır):

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

onunla bir ile oynarken çalıştı küçük, herhangi bir fikir?

Answer 1

Bu görevi, blockui olarak bilinen jQuery eklentisini kullanarak yapabilirsiniz (yeterince komik). Çalıştırdığınız yana

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

: Sonra projede bu kodu içerir https://gist.github.com/whoshotjr/3010693

Basitçe http://malsup.com/jquery/block/

edinilebilir jquery.blockui.js şunlardır:

burada Bu bağlantı bir örnek gösterilmektedir İstemci tarafı, bir web isteği gerçekleştirirken neredeyse her zaman kullanıcı arayüzünü engellemek için Javascript kullanmak zorunda kalacaksınız. MVC'de buna benzer bir kurulum kullandım ama sonuçta hepsi aynı. Bu yardımcı olur umarım!