2017-02-28 75 views
0

我正在顯示加載圖像,直到頁面加載完成,我想再次顯示此圖像,直到按鈕單擊事件處理程序完成。但是由於asp.net網頁中的頁面生命週期,我無法做到這一點。有關如何做的建議?ASP.NET Web窗體事件處理程序在加載後修改頁面組件

+0

。你的按鈕點擊是ajax呼叫? –

+0

我正在使用ASP.NET Web窗體 –

+0

所以它應該是當你點擊,但將圖像容器的可見性設置爲true,並在最後單擊時將其設置爲false –

回答

0

一個選項是使用更新面板,儘管你也可以通過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> 
+0

它工作正常。謝謝! –

+0

@SafaaMamdouhSalem很高興聽到這一點。請接受我的回答 –

相關問題