asp.net装载进度条及工作页面框架主要由4个部分组成,这4个部分的名称及在整个框架中所起到的作用如下:
1.入口链接地址页面(aspx):比如,登录页面.提供到目标地址的一个链接,并向该目标传递一些启动必须的基本链接参数.
2.入口链接目标页面(aspx):该目标对象是整个框架的核心,页面装载时通过document.write输出2个iframe,其中一个iframe1包含在一个div中,该iframe指向装载进度形象页面.另一个iframe2的src设置为空(由后台代码在后期设置src指向实际目标工作页面),在输出2个iframe的html代码后,立即输出通过xmlHttp请求自身的request,并将request返回的值赋予iframe2的src属性.
后台代码在页面装载的过程中,将传入的基本链接参数放置到cache中,备用.
后台代码在收到前台代码的xmlHttp请求时,将cache中的基本链接参数,连同实际目标工作页面地址,一并以url的形式返回给xmlHttp请求者(即自身的前台Html代码)
3.装载进度形象页面(html):在界面上显示一个装载进度条,在onload事件中开始调用,当进度条读满时,关闭进度条的显示.
4.实际目标工作页面(aspx):在页面装载完成后通过window.parent索引到入口链接目标页面,关闭该包含iframe1的div的显示.
后台代码接收启动必须的基本链接参数,该基本链接参数由入口链接目标页面的iframe2的src提供.
框架实现代码:
1.入口链接地址页面(aspx):
CS:
System.Collections.Specialized.NameValueCollection parameters = new System.Collections.Specialized.NameValueCollection();
parameters.Add("examId", gvActorList.DataKeys[e.Row.RowIndex].Value.ToString());
parameters.Add("paperId", ((DisplayObject_V_BIZ_QUERY_EXAM_ACTOR)e.Row.DataItem).ACTOR_PAPER_ID);
//string url = ControlHelper.EncodeUrl("modules/exam/Exam_Action.aspx", parameters);
string url = ControlHelper.EncodeUrl("modules/exam/loading.aspx", parameters);
string scripts = GeOpenFullWindowScript(url);
e.Row.Cells[0].Text = string.Concat("<a href=/"javascript:", scripts, "/">", e.Row.Cells[0].Text, "</a>");
2.入口链接目标页面(aspx):
HTML:
<!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></title>
<script type="text/javascript">
function outputloading()
{
document.write('<html>');
document.write('<body>');
document.write('<script type=/'text/javascript/'>');
document.write('function createRequest()');
document.write('{');
document.write('var xmlHttp = false;');
document.write('/*@cc_on @*/');
document.write('/*@if (@_jscript_version >= 5)');
document.write('try {');
document.write('xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");');
document.write('} catch (e) {');
document.write('try {');
document.write('xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");');
document.write('} catch (e2) {');
document.write('xmlHttp = false;');
document.write('}');
document.write('}');
document.write('@end @*/');
document.write('if (!xmlHttp && typeof XMLHttpRequest != /'undefined/') {');
document.write('xmlHttp = new XMLHttpRequest();');
document.write('}');
document.write('return xmlHttp;');
document.write('}');
document.write('function request(url)');
document.write('{');
document.write('var request = createRequest();');
document.write('request.open("GET", url, false);');
document.write('request.send();');
document.write('if (request.status != 200)');
document.write('{');
document.write('return /'请求失败/';');
document.write('}');
document.write('else');
document.write('{');
document.write('return request.responseText;');
document.write('}');
document.write('}');
document.write('<//script>');
var content = '<iframe id=/'frameLoading/' marginwidth=0 marginheight=0 frameborder=0 bordercolor=/'#000000/' scrolling=no src=/'loading.htm/' width=250 height=70><//iframe>';
var left = 200;
var top = 150;
document.write('<DIV id="loadingPanel" display:block; style="Z-INDEX: 10; POSITION: absolute; width:250px; height:70px;left:'+ left +';top:'+ top +'">'+content+'</DIV>');
document.write('<iframe id=/'frameTarget/'marginwidth=0 marginheight=0 frameborder=0 bordercolor=/'#000000/' scrolling=no src=/'/' width=100% height=100%><//iframe>');
document.write('<script type=/'text/javascript/'>');
document.write('var url = /'loading.aspx?target=true/';');
document.write('var frame = document.getElementById(/'frameTarget/');');
document.write('frame.src = request(url);');
document.write('<//script>');
document.write('<script type=/'text/javascript/'>');
document.write('function closeMsgChain()');
document.write('{try{window.opener.location.reload();self.close();}catch(e){}}');
document.write('<//script>');
document.write('<//body>');
document.write('<//html>');
}
</script>
</head>
<body οnlοad="outputloading()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
CS:
protected void Page_Load(object sender, EventArgs e)
{
if (Request["target"] != null)
{
//向客户端回发缓存的参数
string examId = (string)CacheHelper.GetServerCache(CacheHelper.PrepareCacheKey("loading_examId",SystemLogic.CurrentUser.ID));
string paperId = (string)CacheHelper.GetServerCache(CacheHelper.PrepareCacheKey("loading_paperId",SystemLogic.CurrentUser.ID));
System.Collections.Specialized.NameValueCollection parameters = new System.Collections.Specialized.NameValueCollection();
parameters.Add("examId", examId);
parameters.Add("paperId", paperId);
string url = ControlHelper.EncodeUrl("Exam_Action.aspx", parameters);
Response.Write(url);
Response.End();
}
else if (!Page.IsPostBack)
{
System.Collections.Specialized.NameValueCollection parameters = ControlHelper.DecodeParameter(this.Request);
if (parameters["examId"] != null)
{
//将传入的参数置入缓存
CacheHelper.SetServerCache(CacheHelper.PrepareCacheKey("loading_examId",SystemLogic.CurrentUser.ID), parameters["examId"]);
CacheHelper.SetServerCache(CacheHelper.PrepareCacheKey("loading_paperId", SystemLogic.CurrentUser.ID), parameters["paperId"]);
}
}
}
3.装载进度形象页面(html):
HTML:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html{margin:0;padding:20px;font-size:12px;font-family:Arial;font:12px/1 Tahoma, Arial;}
.stepOut{height:20px;border:1px solid #b5d6e6;background:White;width:200px;overflow:hidden;display:none;}
.stepIn{width:50px;background:red;border-top:1px solid b5d6e6;border-bottom:1px solid b5d6e6;overflow:hidden;color:#b5d6e6;text-align:center;font:12px/1.6 arial;}
</style>
<script type="text/javascript">
//<![CDATA[
function LoadBar(outer,iner,time){
$=function (x){return typeof x=="string"?document.getElementById(x):x};
outer=$(outer);
iner=$(iner);
var i,width,This=this,s=(time||2000)/10;
this.run=function (){
clearTimeout(This.t);
outer.style.display='block';
width=outer.offsetWidth;
i=0;
(function (){
iner.style.width=width/s*i++;
iner.innerHTML=Math.ceil(iner.offsetWidth/width*100)+'%';
if(i<s){This.t=setTimeout(arguments.callee,10)
}else
{
//装载完成,隐藏进度条
window.parent.document.getElementById('loadingPanel').style.display = 'none';
}
})()
}
};
function showloading()
{
//十秒进度条
var ldh=new LoadBar(stepOut,stepIn,10000);
ldh.run();
}
//]]>
</script>
</head>
<body οnlοad="showloading()">
<span>数据加载中,请稍后...</span>
<div class="stepOut" id="stepOut">
<div class="stepIn" id="stepIn" />
</div>
</body>
</html>
4.实际目标工作页面(aspx):
HTML:
<html>
<body topmargin="0" leftmargin="0">
<script type="text/javascript">
//装载完成,隐藏进度条
window.parent.document.getElementById('loadingPanel').style.display = 'none';
</script>
</body>
</html>
CS:
System.Collections.Specialized.NameValueCollection parameters = ControlHelper.DecodeParameter(this.Request);
if (parameters["examId"] != null)
{
this.userInfo.UserId = SystemLogic.CurrentUser.ID;
this.examInfo.ExamId = parameters["examId"];
this.paperInfo.ExamId = parameters["examId"];
this.paperInfo.PaperId = parameters["paperId"];
}
框架运行效果: