页面第一次打开即给用户异步提示之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>

英文地址：http://mattberseth.com/blog/2007/07/delay_load_an_updatepanel.html

转载于:https://www.cnblogs.com/baixingfa/archive/2008/05/17/1201532.html