ASP.Net에 대한 최상의 "로드 중"피드백?

Question

그래서 우리는 ASP.Net 응용 프로그램을 가지고 있습니다. 상당히 표준 적이며, 거기에는 많은 updatepanels와 포스트 백이 있습니다. 일부 페이지에

우리는

<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation"> 
    <Animations> 
     <OnUpdating> 
      <FadeOut Duration="0.1" minimumOpacity=".3" /> 
     </OnUpdating> 
     <OnUpdated> 
      <FadeIn minimumOpacity=".5" Duration="0" /> 
     </OnUpdated> 
    </Animations> 
</ajax:UpdatePanelAnimationExtender> 

이 어떤 기본적으로 포스트 백이 일어나고있는 페이지 출력 백인 (그러나 모달 대화 회색 배경이 충돌). 어떤 경우에는 페이지 중간에 회전 아이콘이있는 progressupdate 컨트롤이 있습니다.

그러나 그 중 어느 것도 특히 좋고 조금은 어색해 보입니다. 또한 앱 주변의 다양한 장소에서 많은 코드가 필요합니다.

다른 사람들이 사용하고 효과적인 방법은 무엇입니까?

Answer 1

을 가지고, 내가 사용하는 것입니다 모달 팝업에서 UpdateProgress를 사용합니다.

이 트위스트를 추가하고 팝업, UpdateProgress 및이 코드를 마스터 페이지에 넣으므로 필요할 때마다 마스터 페이지를 콘텐츠 페이지에 연결하십시오.

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

</script> 

여기

일부 심판 :

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html

Answer 2

애니메이션 GIF는 코드가 가장 적게 필요하며 원하는 색상을 원하는대로 선택할 수 있습니다 (Ajaxload - Ajax loading gif generator).

Answer 3

나는 애니메이션 GIF (Bermos 링크)와 조합 UpdatePanelAnimationExtender 그러나의 UpdateProgress 제어를 사용 havent 한이에

<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" > 
      <ProgressTemplate> 
      <div class="progress"> 
       <img src="images/ajax-loader-arrows.gif" />&nbsp;please wait... 
      </div> 
      </ProgressTemplate> 
</asp:UpdateProgress> 

ProgressTemplate는 관련 업데이트 패널의 모든 다시 게시에 표시됩니다 (500ms 후 예).

EDIT : 여기서 "진행률"클래스는 f.e. 이 :

.progress 
{ 
    text-align:center; 
    vertical-align:middle; 
    position: absolute; 
    left: 44%; 
    top: 35%; 
    border-style:outset; 
    border-color:silver; 
    background-color:Silver; 
    white-space:nowrap; 
    padding:5px; 
} 

안부, 팀

Answer 4

이것은 내가 제안이 모달 팝업 형 배경 및 GIF 다른 사람처럼

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0"> 
<ProgressTemplate> 
    <div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray; 
    filter: alpha(opacity=70); opacity: 0.7;"> 
    &nbsp; 
    </div> 
    <table style="position: absolute; width: 100%; height: 100%; z-index: 101;"> 
    <tr> 
     <td align="center" valign="middle"> 
     <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px; 
      width: 200px;"> 
      <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" /> 
      Please wait.... 
     </div> 
     </td> 
    </tr> 
    </table> 
</ProgressTemplate>