C# Asp.Net进度条

源码下载

效果图:

   未接触进度条源码之前,觉得进度条是比较神秘的。接触之后还是挺简单的。原版进度条源码来自NetCMS 。代码如下:

  1. /// <summary>   
  2. /// 网页进度条   
  3. /// </summary>   
  4. public   class  HProgressBar   
  5. {   
  6.      /// <summary>   
  7.      /// 进度条的初始化   
  8.      /// </summary>   
  9.      public   static   void  Start()   
  10.     {   
  11.         Start( "正在加载..." );   
  12.     }   
  13.      /// <summary>   
  14.      /// 进度条的初始化   
  15.      /// </summary>   
  16.      /// <param name="msg">最开始显示的信息</param>   
  17.      public   static   void  Start( string  msg)   
  18.     {   
  19.          string  s =  "<html xmlns=/"http://www.w3.org/1999/xhtml/">/r/n<head>/r/n<title></title>/r/n/r/n" ;   
  20.         s +=  "<link href=/"/css/css.css/" rel=/"stylesheet/" type=/"text/css/" />/r/n" ;   
  21.         s +=  "<style>body {text-align:center;margin-top: 50px;}#ProgressBarSide {height:25px;border:1px #2F2F2F;width:65%;background:#EEFAFF;}</style>/r/n" ;   
  22.         s +=  "<script language=/"javascript/">/r/n" ;   
  23.         s +=  "function SetPorgressBar(msg, pos)/r/n" ;   
  24.         s +=  "{/r/n" ;   
  25.         s +=  "document.getElementById('ProgressBar').style.width = pos + /"%/";/r/n" ;   
  26.         s +=  "WriteText('Msg1',msg + /" 已完成/" + pos + /"%/");/r/n" ;   
  27.         s +=  "}/r/n" ;   
  28.         s +=  "function SetCompleted(msg)/r/n{/r/nif(msg==/"/")/r/nWriteText(/"Msg1/",/"完成。/");/r/n" ;   
  29.         s +=  "else/r/nWriteText(/"Msg1/",msg);/r/n}/r/n" ;   
  30.         s +=  "function WriteText(id, str)/r/n" ;   
  31.         s +=  "{/r/n" ;   
  32.         s +=  "var strTag = '<span style=/"font-family:Verdana, Arial, Helvetica;font-size=11.5px;color:#DD5800/">' + str + '</span>';/r/n" ;   
  33.         s +=  "document.getElementById(id).innerHTML = strTag;/r/n" ;   
  34.         s +=  "}/r/n" ;   
  35.         s +=  "</script>/r/n</head>/r/n<body>/r/n" ;   
  36.         s +=  "<div id=/"Msg1/"><span style=/"font-family:Verdana, Arial, Helvetica;font-size=11.5px;color:#DD5800/">"  + msg +  "</span></div>/r/n" ;   
  37.         s +=  "<div id=/"ProgressBarSide/" align=/"left/" style=/"color:Silver;border-width:1px;border-style:Solid;/">/r/n" ;   
  38.         s +=  "<div id=/"ProgressBar/" style=/"background-color:#008BCE; height:25px; width:0%;color:#fff;/"></div>/r/n" ;   
  39.         s +=  "</div>/r/n</body>/r/n</html>/r/n" ;   
  40.         System.Web.HttpContext.Current.Response.Write(s);   
  41.         System.Web.HttpContext.Current.Response.Flush();   
  42.     }   
  43.      /// <summary>   
  44.      /// 滚动进度条   
  45.      /// </summary>   
  46.      /// <param name="Msg">在进度条上方显示的信息</param>   
  47.      /// <param name="Pos">显示进度的百分比数字</param>   
  48.      public   static   void  Roll( string  Msg,  int  Pos)   
  49.     {   
  50.          string  jsBlock =  "<script language=/"javascript/">SetPorgressBar('"  + Msg +  "',"  + Pos +  ");</script>" ;   
  51.         System.Web.HttpContext.Current.Response.Write(jsBlock);   
  52.         System.Web.HttpContext.Current.Response.Flush();   
  53.     }   
  54. }  

如下调用:

  1. protected   void  Button1_Click( object  sender, EventArgs e)   
  2. {   
  3.      try   
  4.     {   
  5.         HProgressBar.Start( "正在提交数据..." );   
  6.          //do something   
  7.          for  ( int  i = 0; i <= 100; i += 10)   
  8.         {   
  9.             HProgressBar.Roll( "正在提交数据..." , i);   
  10.   
  11.             System.Threading.Thread.Sleep(100);   
  12.         }   
  13.         HProgressBar.Roll( " 提交数据完成。&nbsp;<a class=/"list_link/" href= /"javascript:history.back();/">返 回</a> &nbsp; <a class= /"list_link/" href=/"ProgressBar.aspx/">浏览首页</a>" , 100);   
  14.     }   
  15.      catch  (Exception ex)   
  16.     {   
  17.         HProgressBar.Roll( "提交数据失败。<a href='#'>查看日志</a>" , 0);   
  18.     }   
  19.   
  20.      //不想再显示按钮,加上下句   
  21.      //Response.End();   
  22. }  

原理就是服务端分段返回生成的html和js代码,而浏览器也是下载一段代码就解析一段js代码,不必等到全部下载完成。

  原版已经很好了。但是觉得以后要换样式的话要麻烦一点,顺手将它改成读模板的,这样改样式的话改模板就可以了。代码如下:

  1. public   class  MyHProgressBar   
  2. {   
  3.      /// <summary>   
  4.      /// 进度条的初始化   
  5.      /// </summary>   
  6.      public   static   void  Start()   
  7.     {   
  8.         Start( "正在加载..." );   
  9.     }   
  10.      /// <summary>   
  11.      /// 进度条的初始化   
  12.      /// </summary>   
  13.      /// <param name="msg">最开始显示的信息</param>   
  14.      public   static   void  Start( string  msg)   
  15.     {   
  16.         Start(msg,1);   
  17.     }   
  18.      public   static   void  Start( string  msg, int  pStyle)   
  19.     {   
  20.          //FileStream fs = new FileStream(, FileMode.Open);   
  21.         StreamReader sr =  new  StreamReader(System.Web.HttpContext.Current.Server.MapPath( "~/Templets/ProgressBar"  + pStyle .ToString()+  ".html" ),  true );   
  22.   
  23.         System.Web.HttpContext.Current.Response.Write(sr.ReadToEnd().Replace( "[Start]" , msg));   
  24.         System.Web.HttpContext.Current.Response.Flush();   
  25.         sr.Close();   
  26.         sr.Dispose();   
  27.     }   
  28.      /// <summary>   
  29.      /// 滚动进度条   
  30.      /// </summary>   
  31.      /// <param name="Msg">在进度条上方显示的信息</param>   
  32.      /// <param name="Pos">显示进度的百分比数字</param>   
  33.      public   static   void  Roll( string  Msg,  int  Pos)   
  34.     {   
  35.          string  jsBlock =  "<script language=/"javascript/">SetPorgressBar('"  + Msg +  "',"  + Pos +  ");</script>" ;   
  36.         System.Web.HttpContext.Current.Response.Write(jsBlock);   
  37.         System.Web.HttpContext.Current.Response.Flush();   
  38.     }   
  39. }  

使用方法一样,只是Start的时候多了个选择。模板1的代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. < head >   
  4. < meta   http-equiv = "Content-Type"   content = "text/html; charset=utf-8"   />   
  5. < title > 无标题文档 </ title >   
  6. < style   type = "text/css" >   
  7. <!--   
  8. body {margin-top: 50px;}   
  9. .Main {   
  10.     position: relative;   
  11.     width:65%;   
  12.     height:32px;   
  13.     margin:auto;   
  14.     background-color: #EEFAFF;   
  15.     border: #2F2F2F 1px solid   
  16. }   
  17. #divMsg{   
  18.     position: absolute;   
  19.     z-index: 1000;   
  20.     width:100%;   
  21.     line-height:32px;   
  22.     text-align:center;   
  23. }   
  24. #ProgressBar   
  25. {   
  26.     width:0%;   
  27.     height:100%;   
  28.     background-color:#008BCE;   
  29. }   
  30. -- >   
  31. </ style >   
  32. < script   language = 'javascript' >   
  33. function SetPorgressBar(msg, pos)   
  34. {   
  35. document.getElementById('ProgressBar') .style.width  =  pos  + '%';   
  36. WriteText('divMsg',msg + ' 已完成' + pos + '%');   
  37. }   
  38.   
  39. function WriteText(id, str)   
  40. {   
  41. var  strTag  =  '<span style="font-family:Verdana, Arial, Helvetica;font-size=11.5px;">'  + str + ' </ span > ';   
  42. document.getElementById(id) .innerHTML  =  strTag ;   
  43. }   
  44. //for(var  i = 0 ;i < =100;i+=10)   
  45. //{   
  46. //  setTimeout("SetPorgressBar('msg', "+i+")",i*10);   
  47. //}   
  48. </ script >   
  49. </ head >   
  50.   
  51. < body >   
  52. < div   class = 'Main' >   
  53.    < div   id = 'divMsg' > [Start] </ div >   
  54.    < div   id = 'ProgressBar' > </ div >   
  55. </ div >   
  56. </ body >   
  57. </ html >   

开发环境:VS2005+SP1

   来源:our-code.com。转载请注明出处!

你可能感兴趣的:(JavaScript,html,浏览器,C#,asp.net,border)