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

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

摘要生成于 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%>&nbsp;&nbsp;发送邮件</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 窗体设计器生成的代码
    }

}

 
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值