asp.net 正在加载... 效果
我从A.aspx页面跳转到B.aspx页面 在B.aspx页面Load事件中加载大批量的数据，
问题：在A.aspx跳转时就卡在那里了，要B.aspx页面Load事件加载完才跳转， 有什么办法先跳转到B.aspx在加载Load事件 ，并显示 “正在加载...”
在绑定数据到Repeater上
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Loading</title>
</head>
<body>
<form name="loading">
<p align="center">正在跳转，请稍后...</p>
<p align="center">
<input type="text" name="bar" style="border-style:none; background-color:#D3E8D0; font-weight:bold" />
<input type="text" name="percentage"style="border-style:none; background-color:#FFFFFF; max-width:30px"/>
</p>
<p align="center">
如果您的浏览器不支持跳转，请点击<a href="http://www.126.com">这里</a>手动跳转
</p>
<script language="javascript" type="text/javascript">
var percent=0; //百分比进度，显示在滚动条后面
var element="||"; //滚动条单元竖线
var elements="||"; //滚动条当前竖线
count(); //开始调用循环
function count(){
percent=percent+10; //每次百分比加10
elements =elements + element; //滚动条当前竖线增加一个滚动条单元竖线
document.loading.bar.value=elements; //设置窗体loading表单中bar元素的当前值
document.loading.percentage.value=percent+"%"; //设置窗体loading表单中percentage元素的当前值
if (percent<99){ //percent小于99则继续循环
setTimeout("count()",500); //每500ms进行一次count()
}
else{
window.location = "http://www.126.com"; //percent达到100时跳转
}
}
</script>
</form>
</body>
</html>
[解决办法]
可以利用JS+Ajax局部加载数据
$.get("LoadData.aspx",null,function(data){
//开始加载数据
})
[解决办法]
在B页面的内容最上方放一个正在加载的图片，用JS判断如果当前页面加载完成 删除该图片。建议使用Ajax异步加载数据的好！
[解决办法]
提供另外一个思路，在a页面想办法，b无需改动。
b页面慢，在a点击b的链接后，实际是一直会停留在a等待的，可以在点击链接那里做个js效果，点击后显示等待提示。
例如给链接绑定个jq事件，然后弹出个遮盖层，显示loading信息。
jquery blockUI可以实现
http://www.malsup.com/jquery/block/
[解决办法]
有asp.net ajax控件。好像是UpdateProgress 这个，你可以试试
[解决办法]
b页面完整的代码这样写
- HTML code
<%@ Page Language="C#" EnableViewState="true" AutoEventWireup="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> public System.Data.DataTable GetData() { System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser"); dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32))); dataTable1.Columns.Add(new System.Data.DataColumn("Title", typeof(System.String))); for (int i = 0; i < 8; i++) { dataTable1.Rows.Add(new Object[] { i, "测试" + i.ToString() }); } return dataTable1; } protected void Page_Load(object sender, EventArgs e) { if (!String.IsNullOrEmpty(Request.QueryString["xxxx"])) { Response.ClearContent(); Repeater1.DataSource = GetData(); Repeater1.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); Repeater1.RenderControl(htw); Response.Write(sb.ToString()); Response.End(); } } public override void VerifyRenderingInServerForm(Control control) { }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="jquery-1.8.1.min.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <div id="loading">正在加载…………</div> <div id="Content"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div><%#Eval("Title")%></div> </ItemTemplate> </asp:Repeater> </div> </form> <script type="text/javascript"> window.onload = function () { $.get('<%=Request.FilePath %>?xxxx=' + (new Date()).valueOf(), function (data) { $('#loading').hide(); $("#Content").html(data); }); } </script></body></html>
[解决办法]
用Jquery
$.ajax()方法中beforeSend回调函数
http://www.w3school.com.cn/jquery/ajax_ajax.asp