ASP.NET Web Forms 이벤트 핸들러는로드 후 페이지 구성 요소를 수정합니다.

Question

페이지로드가 완료 될 때까지로드 이미지를 표시하고 있으며 버튼 클릭 이벤트 핸들러가 완료 될 때까지이 이미지를 다시 표시하려고합니다. 그러나 asp.NET 웹 양식의 페이지 수명주기 때문에이 작업을 수행 할 수 없습니다. 그것을하는 방법에 대한 제안?

Answer 1

하나의 옵션은 업데이트 패널을 사용하는 것이지만 jquery로도이를 수행 할 수 있습니다. 업데이트 된 패널에서로드 표시기로 div를 가질 수 있습니다. 그러면 버튼을 클릭하면 표시됩니다.

신용 안녕 당신이 asp.net 양식 또는 MVC를 사용하는이 링크 http://www.aspsnippets.com/Articles/Show-Loading-Progress-Indicator-using-GIF-Image-when-UpdatePanel-is-updating-in-ASPNet.aspx

<asp:ScriptManager runat="server"> 
     </asp:ScriptManager> 
     <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> 
     <ProgressTemplate> 
      <div class="modal"> 
       <div class="center"> 
        <img alt="" src="loader.gif" /> 
       </div> 
      </div> 
     </ProgressTemplate> 
     </asp:UpdateProgress> 
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <div align="center"> 
       <h1> 
        Click the button to see the UpdateProgress!</h1> 
       <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" /> 
      </div> 
     </ContentTemplate> 
     </asp:UpdatePanel> 


    protected void Button1_Click(object sender, EventArgs e) 
    { 
     System.Threading.Thread.Sleep(5000); 
    } 

// CSS

<style type="text/css"> 
body 
{ 
    margin: 0; 
    padding: 0; 
    font-family: Arial; 
} 
.modal 
{ 
    position: fixed; 
    z-index: 999; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    background-color: Black; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
    -moz-opacity: 0.8; 
} 
.center 
{ 
    z-index: 1000; 
    margin: 300px auto; 
    padding: 10px; 
    width: 130px; 
    background-color: White; 
    border-radius: 10px; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -moz-opacity: 1; 
} 
.center img 
{ 
    height: 128px; 
    width: 128px; 
} 
</style>