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

【问题标题】：Capturing ANY event that triggers a postback and firing an event before the data is sent to the server捕获任何触发回发的事件并在数据发送到服务器之前触发事件
【发布时间】：2017-10-05 12:27:22
【问题描述】：

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

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

【问题讨论】：

你可以像下面的 msdn 文章 (msdn.microsoft.com/en-us/library/bb386421.aspx) 一样使用带有 updateprogress 的 updatepanel

标签： javascript c# jquery asp.net ajax

【解决方案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>

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

【讨论】：