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

最新推荐文章于 2025-08-18 21:19:43 发布

Lvjianhappy

最新推荐文章于 2025-08-18 21:19:43 发布

阅读量685

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Lvjianhappy/article/details/2456301

本文介绍如何利用ASP.NET AJAX实现UpdatePanel的延迟加载，通过隐藏的按钮触发postback，实现页面加载完成后UpdatePanel内的数据更新。文章详细展示了具体的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本做法是页面加载刷新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">

/// <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>

<title>Untitled Page</title>

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>

<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" />

使用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">

<asp:AsyncPostBackTrigger ControlID="btn" />

</Triggers>

<asp:GridView ID="gvCustomers" runat="server" DataSourceID="sqldsCustomersEmpty"

AllowPaging="true" AllowSorting="true" PageSize="10" Width="95%">

</asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server" TargetControlID="updatePanel">

<%-- 设置UpdatePanel异步更新中的动画效果--%>

</Parallel>

</OnUpdating>

<%--设置UpdatePanel异步更新结束后的动画效果--%>

</Parallel>

</OnUpdated>

</Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

<span style="color:#fff; margin:3px">Loading </span>

</div>

</form>

</body>

</html>

希望本文对你有所帮助。。