页面第一次打开即给用户异步提示之Asp.net Ajax延迟加载UpdatePanel-heycode-嘿！代码。a

基本做法是页面加载刷新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>http://www.dwww.cn 设计家园</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>