页面第一次打开即给用户异步提示之Asp.net Ajax延迟加载UpdatePanel

基本做法是页面加载刷新updatepanel从asp.net的AJAX客户端pageload事件。要做到这一点，需添加一个ASP.Net Server按钮并设定其样式行为为隐藏，还需设置它为updatepanel更新条件的触发器，因为这会导致postback ，然后从AJAX客户端pageload事件开始导致按钮异步从服务器后读取的数据.具体实现如下：
<% @ Page Language = " C# "   %>
<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " ajaxToolkit "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< script runat = " server " >
     /**/ /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
     protected   void  Page_Load( object  sender, EventArgs e)
     ... {
        System.Threading.Thread.Sleep(3000);
    }

     /**/ /// <summary>
    /// 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="args"></param>
     protected   void  Btn_Click( object  sender, EventArgs args)
     ... {
        this.gvCustomers.DataSourceID = this.sqldsCustomers.ID;
        this.gvCustomers.DataBind();
    }
</ script >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head id = " Head1 "  runat = " server " >
     < title > Untitled Page </ title >
     < script type = " text/javascript "  language = " javascript " >
    
    var _isInitialLoad  =   true ;

    function pageLoad(sender, args) ... {
        if(_isInitialLoad)...{
            _isInitialLoad = false;
            //  设置Button Click postback
            __doPostBack('<%= this.btn.ClientID %>','');        
        }
    }
    
    function onUpdating() ... {
        // 取得 update progress div
        var updateProgressDiv = $get('updateProgressDiv'); 

        //  取得 gridview element        
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
        
        // 使它显示
        updateProgressDiv.style.display = '';        
        
        // 获得DOM 元素的位置、宽度和高度
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
        

        var x = (gridViewBounds.x + gridViewBounds.width - updateProgressDivBounds.width);
        var y = gridViewBounds.y;

        //    设置 progress 显示的坐标   
       Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);           
    }

    function onUpdated()  ... {
        // 获得update progress div
        var updateProgressDiv = $get('updateProgressDiv'); 
        // 设置隐藏      
       updateProgressDiv.style.display = 'none';
    }
    
     </ script >

</ head >
< body >
     < form id = " form "  runat = " server " >
         < asp:ScriptManager ID = " scriptManager "  runat = " server "   />
         < div >
             < asp:SqlDataSource ID = " sqldsCustomers "  runat = " server "  
                SelectCommand = " select customerid, companyname, contactname, contacttitle from dbo.customers "
                SelectCommandType = " Text "  ConnectionString = " todo "   />
             < asp:SqlDataSource ID = " sqldsCustomersEmpty "  runat = " server "  
                SelectCommand = " select top 10 '' as customerid, '' as companyname, '' as contactname, '' as contacttitle from dbo.customers "
                SelectCommandType = " Text "  ConnectionString = " todo "   />                 
            
             < p style = " background-color:AliceBlue; width:95% " >
                使用Asp.Net Ajax 延迟加载UpdatePanel
             </ p >
            
             < br  />
             < asp:Button ID = " btn "  runat = " server "  OnClick = " Btn_Click "  style = " display:none; " />    
             < asp:Label ID = " lblTitle "  runat = " server "  Text = " Customers "  BackColor = " lightblue "  Width = " 95% "   />
             < asp:UpdatePanel ID = " updatePanel "  runat = " server "  UpdateMode = " Conditional " >
                 < Triggers >
                     < asp:AsyncPostBackTrigger ControlID = " btn "   />
                 </ Triggers >
                 < ContentTemplate >
                     < asp:GridView ID = " gvCustomers "  runat = " server "  DataSourceID = " sqldsCustomersEmpty "  
                            AllowPaging = " true "  AllowSorting = " true "  PageSize = " 10 "  Width = " 95% " >
                         < AlternatingRowStyle BackColor = " aliceBlue "   />
                         < HeaderStyle HorizontalAlign = " Left "   />
                     </ asp:GridView >
                 </ ContentTemplate >
             </ asp:UpdatePanel >   
             < ajaxToolkit:UpdatePanelAnimationExtender ID = " upae "  BehaviorID = " animation "  runat = " server "  TargetControlID = " updatePanel " >
                 < Animations >
                     < OnUpdating >
                         < Parallel duration = " 0 " >
                             <%--  设置UpdatePanel异步更新中的动画效果 --%>
                             < ScriptAction Script = " onUpdating(); "   />   
                          </ Parallel >
                     </ OnUpdating >
                     < OnUpdated >
                         < Parallel duration = " 0 " >
                             <%-- 设置UpdatePanel异步更新结束后的动画效果 --%>
                             < ScriptAction Script = " onUpdated(); "   />  
                         </ Parallel >  
                     </ OnUpdated >
                 </ Animations >
             </ ajaxToolkit:UpdatePanelAnimationExtender >            
             < div id = " updateProgressDiv "  style = " background-color:#CF4342; display:none; position:absolute; " >
                 < span style = " color:#fff; margin:3px " > Loading  </ span >
             </ div >
         </ div >
     </ form >
</ body >
</ html >
希望本文对你有所帮助。。