想实现“正在加载中...”的提示，找到很多都是JS脚本写的
但ASP.NET的代码在Page_Load的事件中用了DataGrid的DataBind数据初始化绑定的代码（就因为此数据量庞大所以才想到提示加载中）这样不初始化完数据就无法显示页面，所以页面响应很慢，也就无法调用JS的脚本以及提示“正在加载中...”我已经尝试：
1、在Page_Load中用Reponse.Write来写JS脚本，但是如果点击按钮后再次查询又会很慢，也不提示“正在加载中”
2、IFrame的方式，我本身的页面也是多个IFrame构成，不知道是否有完整的调用可以提供？希望大家能给出好的解决办法，谢谢~
但ASP.NET的代码在Page_Load的事件中用了DataGrid的DataBind数据初始化绑定的代码（就因为此数据量庞大所以才想到提示加载中）这样不初始化完数据就无法显示页面，所以页面响应很慢，也就无法调用JS的脚本以及提示“正在加载中...”我已经尝试：
1、在Page_Load中用Reponse.Write来写JS脚本，但是如果点击按钮后再次查询又会很慢，也不提示“正在加载中”
2、IFrame的方式，我本身的页面也是多个IFrame构成，不知道是否有完整的调用可以提供？希望大家能给出好的解决办法，谢谢~
<%@ 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>
</asp:ScriptManager>
<asp:UpdatePanel ID="upl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div>
<div>数据加载中，请等待…… </div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:UpdatePanel> <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID ="Button1" EventName ="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"> </asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<span style =" font-size:12px">数据更新中...... </span>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server" Text="Button" Width="143px" OnClick="Button1_Click" />
或使用div显示loading效果
<script language="javascript" type="text/javascript">
document.write(" <div id='loadDiv' style='padding-top: 250px; padding-left: 350px;font-size:x-large;height:400px'> <span id='loading'> <img src=\"../Images/loader2.gif\"/>正在加载数据，请稍候··· </span> </div>");
window.onload = function()
{
document.getElementById("hiddenDiv").style.display="";
document.getElementById("loadDiv").parentNode.removeChild(document.getElementById("loadDiv"));
}
</script>
code=JScript]iframe.onreadystatechange = function(){
document.getElementById("tt_message").value += iframe.readyState + "\r\n";
if (iframe.readyState == "complete"){
alert("IE,Local iframe is now loaded.");
}
};[[/code]还可以在page框架加载后调用ajax二次请求，我觉得第二中挺好的，就是2楼那个意思，但是实现方法有很多了
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}二楼的page_load都没走完的话肯定不能走到HTML的加载中所以也不行。四楼的没看明白请指教。
五楼的没看明白请指教。谢谢大家！还没有解决。
protected void LinkButton1_Click(object sender, EventArgs e)
{
Thread.Sleep(3000);//替换成你的数据加载...
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "first", "<script type='text/javascript'>document.getElementById('master').style.display = 'none';</script>", false);
}<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function LoadData() {
document.getElementById("ma").style.display = "block";
__doPostBack('LinkButton1', '')
}
</script>
</head>
<body onload="javascript:LoadData();">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"></asp:LinkButton>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="ma" style="width: 200px; height: 100px; background-color: #f458ff; display: none;">
数据正在加载中
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
AJAX联合GridView控件的正在加载中。。有代码的朋友帮粘贴下，我就结贴了。只能应用ajax控件和GridView结合实现了。
没有么？硬是要我贴代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Timer_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />
<asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
Stock price is
<asp:Label ID="StockPrice" runat="server"></asp:Label><br />
as of
<asp:Label ID="TimeOfPrice" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<div>
Page originally created at
<asp:Label ID="OriginalTime" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;public partial class Timer_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
OriginalTime.Text = DateTime.Now.ToLongTimeString();
} protected void Timer1_Tick(object sender, EventArgs e)
{
StockPrice.Text = GetStockPrice();
TimeOfPrice.Text = DateTime.Now.ToLongTimeString();
} private string GetStockPrice()
{
double randomStockPrice = 50 + new Random().NextDouble();
return randomStockPrice.ToString("C");
}}