Question

有没有办法捕获从我的母版页触发回发的任何事件，并在页面完全加载之前显示一个页面加载器？澄清一下，我希望页面加载器在按下按钮或下拉列表更改值后立即显示。我目前在我的母版页上使用此脚本

$(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>

Answer 1

正如JKOU所建议的那样，我在MasterPage中使用了一个UpdatePanel，并将我的ContentPlaceHolder包含在UpdatePanel的ContentTemplate中。同时在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>

这样，页面中触发的任何回发都会首先为我的页面加载器设置动画，然后在加载页面时停止。

捕获在数据发送到服务器之前触发回发并触发事件的任何事件

1 个答案: