UpdatePanel/UpdateProgressでjavascriptローディングインジケータを使用していますか？

Question

spin.jsとUpdatePanelを組み合わせることは可能ですか？

普通の方法は、UpdateProgressにgifを置くことですが、代わりにjavascript駆動のスピナー/ローディングインジケーターを使って行うことができますか？

Answer 1

<script type="text/javascript"> 

    window.onload = function() { 
     var opts = { 
      lines: 14, // The number of lines to draw 
      length: 7, // The length of each line 
      width: 4, // The line thickness 
      radius: 10, // The radius of the inner circle 
      color: '#000', // #rgb or #rrggbb 
      speed: 1, // Rounds per second 
      trail: 60, // Afterglow percentage 
      shadow: false // Whether to render a shadow 
     }; 
     var target = document.getElementById('foo'); 
     var spinner = new Spinner(opts); 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(panelLoaded); 

     prm.add_beginRequest(panelUpdateRequest); 
     function panelLoaded(sender, args) { 
      spinner.stop(); 
     } 
     function panelUpdateRequest(sender, args) {     
      spinner.spin(target); 
     }    
    }   

</script> 


<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
    <ProgressTemplate> 
     <div id="foo" style="font-size: large"> 
     </div> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

Answer 2

はい、できます。

この問題は、アップデートパネルで非同期ポストバックの前後にJavaScriptを実行したいと考えています。ページにスピナーが読み込まれていますが、非表示になっています。 UpdatePanelをポストバックする準備ができたら、スピナーを含むdivを表示し、UpdatePanelが完了したらスピナーを含むdivを非表示にします。

これを行う方法の（コード付き）完全な説明についてはこちらをご覧ください：Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX