ASP.Net 클라이언트 측 모드 진행률 표시기

Question

this example을 구현하려고 시도했지만 진행률이 표시되지 않습니다. 내 페이지에 UpdatePanels 또는 기타 항목이 포함되어 있지 않은 이유는 무엇입니까? 내 페이지 선언에서

내가 추가 한 : 내가 추가 한 나의 양식 태그의 내부 즉시

<script src="Scripts/jsUpdateProgress.js" type="text/javascript"></script> 

:

내가 추가 한 헤드 요소 내부

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress"> 
    <asp:UpdateProgress runat="server" ID="UpdateProg1" DisplayAfter="0"> 
     <ProgressTemplate> 
      <div style="position:relative; top:30%; text-align: center;"> 
       <img src="Processing.gif" style="vertical-align: middle" alt="Processing"/> 
        Processing... 
      </div> 
     </ProgressTemplate> 
    </asp:UpdateProgress> 
</asp:Panel> 
<ajaxToolkit:ModalPopupExtender runat="server" ID="ModalProgress" TargetControlID="panelUpdateProgress" BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress"/> 

끝 서식 태그 바로 뒤에 추가했습니다.

,

<script type="text/javascript"> 
     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq); 
     var ModelProgress = '<%= ModalProgress.ClientID %>'; 
     function beginReq(sender, args) { 
      $find(ModalProgress).show(); 
     }    
     function endReq(sender, args) { 
      $find(ModalProgress).hide(); 
     } 
</script> 

내가 보여 진행 상황을 야기 할 것으로 예상이 버튼 : 버튼을 확실히 때문에 내 양식 태그에 다시 게시 그건

<asp:Button runat="server" ID="submit" CssClass="multiViewTab" Text="Submit"/> 

내가 가진 :

onsubmit="return validateForm()" 

그리고 validateForm 실행됩니다. 또한 validateForm은 폼이 유효하고 웹 서비스를 호출하는 AJAX 호출에 대한 JQuery 호출을 포함하는 경우 submitForm 함수를 시작합니다.

2를 가지고 :

훨씬 단순하고 순수한 AJAX,하지만 여전히 작동하지 않습니다. 나는 본질적으로/내가하지 않았다 경우 Z- 인덱스 및 진행 DIV를 사용하여 div의이 나타나지 않을 것 숨 깁니다 보여줍니다 임시 변통 "마법사"를 가지고 있기 때문에

</form> 
<script type='javascript'> 
    $(document).ready(function() { 
    $('body').append('<div id="ajaxBusy"><p><img src="Processing.gif"></p></div>'); 
    $('#ajaxBusy').css("updateProgress"); 
    }); 

    $(document).ajaxStart(function() { 
      $('#ajaxBusy').css("z-index", 2); 
     }).ajaxStop(function() { 
      $('#ajaxBusy').css("z-index", -1); 
     }); 

나는 Z- 인덱스를 사용하고 Z- 색인을 변경하십시오.

Answer 1

MSDN에 따르면 UpdateProgress은 UpdatePanel의 내용이 업데이트되면 피드백을 제공합니다.

내 페이지에는 UpdatePanels 또는 기타 항목이 포함되어 있지 않습니다. 의 이유는 무엇입니까?

간단히 말해서, 그렇습니다.

출처 : UpdateProgress Class

위의 링크가 좋은 예제가 실려있다.