页面第一次打开即给用户异步提示之Asp.net Ajax延迟加载UpdatePanel （转）
2008-05-17 20:44
387 查看
基本做法是页面加载刷新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
<%@ 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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 页面第一次打开即给用户异步提示之Asp.net Ajax延迟加载UpdatePanel
- 页面第一次打开即给用户异步提示之Asp.net Ajax延迟加载UpdatePanel
- UpdatePanel中内容异步加载后，调用JS脚本方法
- vs2012打开提示加载失败（该项目需要用户输入）
- ScriptManager和UpdatePanel控件联合使用实现页面异步局部更新的效果
- Django 1.11 前端数据异步加载（前端页面单独请求用户登录状态）
- vs2012打开提示加载失败--该项目需要用户输入, (打开cocos2dx 2.2项目.sln )
- 提示用户打开某些权限 (打开设置页面)
- ajax异步加载页面，减少用户面对空白网页时间
- Login控件在UpdatePanel内当验证用户信息成功后出现页面刷新的解决办法
- 用UpdatePanel加载页面
- 梅花做的当打开页面时提示正在加载例子，很酷哦
- js实现第一次打开页面弹出提示
- Login控件在UpdatePanel内当验证用户信息成功后出现页面刷新的解决办法
- 打开页面同时jquery异步加载生成新dom并为dom注册事件
- ASP.NET UpdatePanel页面异常提示处理
- 当打开页面时提示正在加载例子，很酷哦
- 让UpdatePanel支持上传文件：解决当页面显式设置document.domain时提示的500错误
- Login控件在UpdatePanel内当验证用户信息成功后出现页面刷新的解决办法
- 动态加载的用户控件中的UpdatePanel无法正常工作