UpdatePanel/UpdateProgress에서 자바 스크립트 로딩 인디케이터 사용?

Question

예를 들어 spin.js과 UpdatePanel을 결합 할 수 있습니까?

정상적인 방법은 gif를 UpdateProgress에 넣는 것입니다. 대신 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