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

希望本文对你有所帮助。
posted @ 2008-05-17 20:23  真见  阅读(2744)  评论(1编辑  收藏  举报