2017-10-05 82 views
2

是否有方法捕獲觸發從我的主頁面回發的任何事件並在頁面完全加載之前顯示頁面加載器? 澄清,我希望頁面加載器儘快顯示按鈕被按下或下拉列表已更改值。 我目前使用這個腳本在我的母版捕獲在數據發送到服務器之前觸發回發並觸發事件的任何事件

$(document).ready(function() { 
    //it just changes style of body to display:block hiding an existing pageloader 
    $('body').addClass('loaded'); 
}); 

但是這個代碼的情況是,只要我火了投遞的頁面可能需要5到10秒鐘加載(等待服務器與從SQL數據迴應),之後纔會觸發javascript事件。

這裏是觸發回傳是母版的ContentPlaceHolder內的下拉列表:

<asp:DropDownList ID="DropDownListSubproject" runat="server" DataSourceID="SqlDataSourceDDLSprj" 
     DataTextField="SubProject" DataValueField="SubProjectID" CssClass="TextBox" AutoPostBack="true"> 
    <asp:ListItem Text="Select Subproject..." Value="0"></asp:ListItem> 
</asp:DropDownList> 
+0

您可以像update以下msdn文章(https://msdn.microsoft.com/en-us/library/bb386421.aspx)一樣使用updateprogress的updatepanel, – JKOU

回答

0

如JKOU建議,我用一個UpdatePanel在我的母版和在UpdatePanel的的ContentTemplate內封閉我的ContentPlaceHolder 。在UpdateProgress模板的同時,我附上了我的預加載器。它在沒有JavaScript的情況下運行良好。

  <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
       <Triggers> 
        <asp:AsyncPostBackTrigger ControlID="MainContent" /> 
       </Triggers>          
       <ContentTemplate> 
        <div class="main">  
         <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>         
         <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
        </div> 
        <asp:Button ID="hiddenAsyncTrigger" runat="server" Text="AsyncUpdate" style="display:none;" /> 
       </ContentTemplate>         
      </asp:UpdatePanel>  
      <asp:UpdateProgress ID="UpdateProgress1" runat="Server" AssociatedUpdatePanelID="UpdatePanel1"> 
       <ProgressTemplate > 
        <div id="loader-wrapper"> //My PageLoader animation 
         <div id="loader"></div> 
         <div class="loader-section section-left"></div> 
         <div class="loader-section section-right"></div> 
        </div> 
       </ProgressTemplate> 
      </asp:UpdateProgress> 

通過這種方式,在頁面中觸發的任何回發第一動畫我的頁面加載,然後加載頁面時停止。