页面提交时显示"提交中"等待效果(亮剑.NET笔记)

概述:实现页面提交时,显示"提交中"等待效果.

 

    在看亮剑.NET的时候.发现里面有一个实现提交页面时显示"提交中"等待效果的例子..这功能倒是不难做,但给用户的感受却是好了很多..就想着以后的页面只要有提交都要实现这样的功能..但每次都写这样的功能很不实际.不适合我这种懒人...就算不是懒的问题!那要去改公司以前的页面也麻烦呀..然后我就在想,有没有方法可以简单设置一下属性,或者为提交控件做一点点的操作就可以实现这样的功能呢?答案是肯定有的!

    根据亮剑里面的提供的例子.我很快想到在页面基类里面添加代码就可以轻松完成这项功能,使用起来也非常方便..废话少说,我们看代码

 PageBase代码如下:

 protected override void OnLoad(EventArgs e)
        {

            StringBuilder pageBase_script = new StringBuilder("<script Language=\"Javascript\">");
            pageBase_script.Append(@"var times=0;
                 function pageBase_tick() //用于显示执行的时长
                 {
                  times++;
                        var str = '';
                        var temp = times%5;
                        for(var i=0;i<temp;i++)
                            str+='．';
                  document.getElementById('pageBase_Clocktimes').innerHTML ='正在提交,请稍候'+ str; 
                 } "
                );
            pageBase_script.Append("<").Append("/").Append("script>");
            StringBuilder pageBase_div = new StringBuilder(" <div id=\"pageBase_runing\" runat=\"server\" style=\"z-index: 12000; left: 0px; width: 100%;  position: absolute; top: 0px; height: 100%\">");
            pageBase_div.Append("<table width=\"100%\" height=\"100%\">");
            pageBase_div.Append("<tr align=\"center\" valign=\"middle\">");
            pageBase_div.Append("<td>");
            pageBase_div.Append(" <table width=\"200\" height=\"25\" bgcolor=\"#9999FF\" style=\"filter: Alpha(Opacity=70); \">");
            pageBase_div.Append(" <tr align=\"center\" valign=\"middle\">");
            pageBase_div.Append("   <td>");
            pageBase_div.Append("<div style=\"width:200px;height:25px; background-color: #99CCFF; \">");
            pageBase_div.Append("         <div id=\"pageBase_Clocktimes\"  style=\"color: #FF0000; float:left; width:196px;height:21px \" >正在提交,请稍候</div>");
                       pageBase_div.Append("</div>");
            pageBase_div.Append("</td>");
            pageBase_div.Append(" </tr>");
            pageBase_div.Append(" </table>");
            pageBase_div.Append(" </td>");
            pageBase_div.Append(" </tr>");
            pageBase_div.Append("  </table>");
            pageBase_div.Append("</div>");

            StringBuilder pageBase_divHide = new StringBuilder("<script Language=\"Javascript\">");
            pageBase_divHide.Append("document.getElementById('pageBase_runing').style.visibility = \"hidden\";");
            pageBase_divHide.Append("<").Append("/").Append("script>");

            if (!Page.ClientScript.IsStartupScriptRegistered("runingscript"))
            {
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "pageBase_div", pageBase_div.ToString());
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "pageBase_script", pageBase_script.ToString());
                Page.ClientScript.RegisterStartupScript(Page.GetType(), "pageBase_divHide", pageBase_divHide.ToString());
            }

            base.OnLoad(e);
        }

 

/// <summary>
        /// 设置提交之后.出现请等待提示,在页面调用基类的这个方法,把要提交的控件传入即可
        /// </summary>
        /// <param name="btn">提交按钮</param>
        public void SubmitLoad(Button btn)
        {
            btn.Attributes.Add("onclick",
                       "javascript:document.getElementById('pageBase_runing').style.visibility='visible';window.setInterval('pageBase_tick()',1000);");
        }
        /// <summary>
        /// 设置提交之后.出现请等待提示
        /// </summary>
        /// <param name="lbtn">提交按钮</param>
        public void SubmitLoad(LinkButton lbtn)
        {
            lbtn.Attributes.Add("onclick",
                                  "javascript:document.getElementById('pageBase_runing').style.visibility='visible';window.setInterval('pageBase_tick()',1000);");
        }

 

 

在继承的页面中使用就非常方便了.例:

SubmitLoad(btnTest);

简单的一句话搞定了!