asp.net+ajax多线程进度条的实现

最新推荐文章于 2025-04-24 21:30:42 发布

yttvclb

最新推荐文章于 2025-04-24 21:30:42 发布

阅读量3.2k

点赞数

分类专栏： AJAX开发技术文章标签： asp.net ajax 多线程 javascript string border

AJAX开发技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过网页展示邮件发送进度的方式，并演示了利用图片移动来模拟进度条增长的效果。通过多线程处理，实现了邮件发送过程中的动态进度显示。

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

demo模拟的是发送多封邮件过程中进度条的显示。其中图片设计的不太规范，所以js控制进度条移动的代码有点乱，这个大家可以替换成自己的，这里只是演示作用。
进度条动态增长的原理是：一个中间扣空的酒瓶子图片，这个图片下面放另外一张图片，移动下层图片以实现进度条增长效果。

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Text;

using System.Threading;

namespace guagedemo

{

/// <summary>

/// guagedemo 的摘要说明。

/// </summary>

public class guagedemo : System.Web.UI.Page

{

public StringBuilder textpile=new StringBuilder(@"<table><tr><td background=images/titlebg.gif height=32 class=t2 width=100%>  发送邮件</td></tr><tr><td><table width=100% border=0 cellspacing=0 cellpadding=0><tr><td width=1 bgcolor=#ADDB52></td><td width=561 valign=top><table width=100% border=0 cellspacing=0 cellpadding=0 background=images/tablebg.gif><tr><td height=6 colspan=2></td></tr>");

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

objMailclass mail=new objMailclass();

mail.mail1=new objMail[3];

mail.mail1cx=3;

mail.mail2=new objMail[3];

mail.mail2cx=3;

mail.mail3=new objMail[3];

mail.mail3cx=3;

mail.mail1[0]=new objMail();

mail.mail1[0].strSubject="类别1邮件：邮件1";

mail.mail1[1]=new objMail();

mail.mail1[1].strSubject="类别1邮件：邮件2";

mail.mail1[2]=new objMail();

mail.mail1[2].strSubject="类别1邮件：邮件3";

mail.mail2[0]=new objMail();

mail.mail2[0].strSubject="类别2邮件：邮件1";

mail.mail2[1]=new objMail();

mail.mail2[1].strSubject="类别2邮件：邮件2";

mail.mail2[2]=new objMail();

mail.mail2[2].strSubject="类别2邮件：邮件3";

mail.mail3[0]=new objMail();

mail.mail3[0].strSubject="类别3邮件：邮件1";

mail.mail3[1]=new objMail();

mail.mail3[1].strSubject="类别3邮件：邮件2";

mail.mail3[2]=new objMail();

mail.mail3[2].strSubject="类别3邮件：邮件3";

intipagetop(mail);

}

输出进度条显示

private void intipagetop(objMailclass maill)

{

进度条初始化

process("-70","-110","");

Thread.Sleep(200);

process("-110","-156","");

Thread.Sleep(200);

发送邮件

}

public class objMail

{

public string strMail;

public string strSubject;

public string strMailType;

}

public class objMailclass

{

public objMail[] mail1;

public int mail1cx=0;

public objMail[] mail2;

public int mail2cx=0;

public objMail[] mail3;

public int mail3cx=0;

}

Web 窗体设计器生成的代码

}

已经对前台如何控制图片进行了演示，这次就仅仅做功能模拟。别忘了打开页面的时候加上start参数，这样才可以启动查数程序。

前台代码：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< html >

< head >

< title > ajaxguagedemo </ title >

< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >

< meta name ="CODE_LANGUAGE" Content ="C#" >

< meta name =vs_defaultClientScript content ="JavaScript" >

< meta name =vs_targetSchema content ="http://schemas.microsoft.com/intellisense/ie5" >

< script language =javascript >

function returnresponse()

{

urls="ajaxguagedemo.aspx?guage=1";

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlHttp.open("GET",urls,true);

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState==4)

{

temp=xmlHttp.responseText;

document.getElementById("ddf").innerText=temp;

if(temp!="100%")

{

returnresponse();

}

xmlHttp.send(urls);

}

</ script >

</ head >

< body MS_POSITIONING ="GridLayout" >

< form id ="Form1" method ="post" runat ="server" >

< input type =button onclick ="returnresponse()" value =1111111 >

< div id =ddf ></ div >

</ form >

</ body >

</ html >

后台代码如下：

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Threading;

namespace guagedemo

{

/// <summary>

/// ajaxguagedemo 的摘要说明。

/// </summary>

public class ajaxguagedemo : System.Web.UI.Page

{

static public int percent=0;//静态变量，记录百分比

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

if(Request.QueryString["start"]!=null)

{

startThread();//开始新进程处理查数程序

}

if(Request.QueryString["guage"]!=null)

{

ajaxResponse();//响应ajax，返回百分比

}

private void guage()

{

for(int i=0;i<100;i++)

{

percent++;

Thread.Sleep(500);

}

public void startThread()

{

System.Threading.Thread thread=new System.Threading.Thread(new System.Threading.ThreadStart(guage));

thread.Start();

}

private void ajaxResponse()

{

Response.Write(percent.ToString()+"%");

Response.Flush();

Response.Close();

}

Web 窗体设计器生成的代码

}