ASP.NET中进度条的简单应用-优快云博客

本文详细介绍了一种在ASP.NET中实现动态更新进度条的方法。通过结合HTML、JavaScript和C#，作者展示了如何在服务器端控制进度条的显示、更新进度百分比以及完成后的隐藏。该方法使用了线程休眠来模拟操作过程，适用于需要长时间运行且希望提供用户反馈的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow">
 2 <head>
 3     <title>无标题页</title>
 4     <script language="javascript">
 5         function SetPorgressBar(pos)
 6         {
 7             //设置进度条居中
 8             var screenHeight = window["mainWindow"].offsetHeight;
 9             var screenWidth = window["mainWindow"].offsetWidth;
10             ProgressBarSide.style.width = Math.round(screenWidth / 2);
11             ProgressBarSide.style.left = Math.round(screenWidth / 4);
12             ProgressBarSide.style.top = Math.round(screenHeight / 2);
13             ProgressBarSide.style.height = "21px";
14             ProgressBarSide.style.display = "";
15             
16             //设置进度条百分比                      
17             ProgressBar.style.width = pos + "%";
18             ProgressText.innerHTML = pos + "%";
19         }
20 
21         //完成后隐藏进度条
22         function SetCompleted()
23         {      
24             ProgressBarSide.style.display = "none";
25         }
26      </script> 
27 </head>
28     <body>
29     <div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none">
30         <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div>
31         <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div>
32     </div>
33     </body>
34 </html>

后台代码：

 1 Default.aspx.cs：
 2 
 3 using System;
 4 using System.Data;
 5 using System.Configuration;
 6 using System.Web;
 7 using System.Web.Security;
 8 using System.Web.UI;
 9 using System.Web.UI.WebControls;
10 using System.Web.UI.WebControls.WebParts;
11 using System.Web.UI.HtmlControls;
12 using System.Threading;
13 using System.IO;
14 
15 public partial class _Default : System.Web.UI.Page
16 {
17     private void beginProgress()
18     {
19         //根据ProgressBar.htm显示进度条界面
20         string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
21         StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
22         string html = reader.ReadToEnd();
23         reader.Close();
24         Response.Write(html);
25         Response.Flush();
26     }
27 
28     private void setProgress(int percent)
29     {
30         string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>";
31         Response.Write(jsBlock);
32         Response.Flush();
33     }
34 
35     private void finishProgress()
36     {
37         string jsBlock = "<script>SetCompleted();</script>";
38         Response.Write(jsBlock);
39         Response.Flush();
40     }
41 
42     private void Page_Load(object sender, System.EventArgs e)
43     {
44         beginProgress();
45 
46         for (int i = 1; i <= 100; i++)
47         {
48             setProgress(i);
49 
50             //此处用线程休眠代替实际的操作，如加载数据等
51             System.Threading.Thread.Sleep(50);
52         }
53 
54         finishProgress();
55     }
56 }