asp.net装载进度条及工作页面框架原理和实现

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 onload="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 onload="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"];                   
                }

框架运行效果: