Asp.Net 基于客户端回调的进度条控件

最新推荐文章于 2010-01-18 20:53:00 发布

转载最新推荐文章于 2010-01-18 20:53:00 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wwwyfjp/archive/2008/05/30/1210483.html

文章标签：

#javascript #ViewUI

本文介绍了一种自制的长任务进度条控件，利用客户端JavaScript周期调用回调函数的方式，实现在不刷新页面的情况下更新进度条。该控件适用于ASP.NET应用程序，并提供了完整的实现代码。

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

这是本人第一篇博客，首先相各位博友问个好。博客注册了有好长一段时间，一直没有时间写点什么东西。最近项目终于不像以前忙了，想起来写点什么。
前段时间在项目遇到一个长任务显示进度条的问题。在网上找了好久都没有找到好的控件。要么下下来bug 一堆，要么就是用起来极端不方便。于是琢磨着自己写一个。站在各位前辈的肩上，花了2 天的时间终于让我弄出来了。

总的思路就是: 客户端使用Javascript 周期调用回调函数，从而达到不刷新效果。

废话少说，来看代码：

protected override void OnPreRender(EventArgs e)

{

ClientScriptManager csm = this.Page.ClientScript;

string startReference = this.Page.ClientScript.GetCallbackEventReference(this, "0", "UpdateState", null);

string reference = this.Page.ClientScript.GetCallbackEventReference(this, null, "UpdateState", null);

System.Text.StringBuilder scriptBuilder = new StringBuilder();

scriptBuilder.AppendLine("var timerId;");

scriptBuilder.AppendLine(" function start()");

scriptBuilder.AppendLine("{");

scriptBuilder.AppendLine(startReference + ";");

scriptBuilder.AppendLine(" timerId = setInterval( function (){" + reference + "; }," + RefleshTimeSpan + " );");

scriptBuilder.AppendLine("}");

scriptBuilder.AppendLine("function UpdateState(arg, context)");

scriptBuilder.AppendLine("{");

scriptBuilder.AppendLine("if(arg != \"\")");

scriptBuilder.AppendLine(" {");

scriptBuilder.AppendLine("var contents = arg.split(\"],[\");");

scriptBuilder.AppendLine("var currentProgress = contents[0].substring(1);");

scriptBuilder.AppendLine("var infoText = contents[1].substring(0, contents[1].length - 1);");

scriptBuilder.AppendLine("document.getElementById(\"innerDiv\").style.width = currentProgress ;");

if (!string.IsNullOrEmpty(this.InfoProviderID))

{

scriptBuilder.AppendLine("document.getElementById('" + this.InfoProviderID + "').innerText = infoText;");

}

scriptBuilder.AppendLine("if(currentProgress >= " + this.InnerWidth + ")");

scriptBuilder.AppendLine("{");

if (!string.IsNullOrEmpty(this.InfoProviderID))

{

scriptBuilder.AppendLine("document.getElementById('" + this.InfoProviderID + "').innerText = infoText;");

}

scriptBuilder.AppendLine("document.getElementById(\"innerDiv\").style.width = " + this.InnerWidth + ";");

scriptBuilder.AppendLine("window.clearInterval(timerId);");

scriptBuilder.AppendLine("}");

if (!csm.IsStartupScriptRegistered("callback"))

{

csm.RegisterClientScriptBlock(this.GetType(), "callback", scriptBuilder.ToString(), true);

}

向客户端注册Javascript

protected override void RenderContents(HtmlTextWriter output)

{

output.AddAttribute(HtmlTextWriterAttribute.Id, "innerDiv");

if (this.ProgressBackColor != Color.Empty)

{

output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, ColorTranslator.ToHtml(ProgressBackColor));

}

if (!ControlStyle.IsEmpty)

if (!ControlStyle.Height.IsEmpty)

{

output.AddStyleAttribute(HtmlTextWriterStyle.Height, this.Height.Value.ToString());

}

if (!string.IsNullOrEmpty(this.ProgressBackImage))

{

output.AddStyleAttribute(HtmlTextWriterStyle.BackgroundImage, string.Format("url({0})", this.ProgressBackImage));

}

output.RenderBeginTag(HtmlTextWriterTag.Div);

output.RenderEndTag();

        }
        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }
        }

Render 控件

ICallbackEventHandler Members #region ICallbackEventHandler Members

public string GetCallbackResult()

{

return string.Format("[{0}],[{1}]", currentProgress.ToString(), InfoText);

}

public void RaiseCallbackEvent(string eventArgument)

{

if (eventArgument =="0")

{

if (TaskStartDelegate != null)

{

currentProgress = 0;

Thread td = new Thread(TaskStartDelegate);

try

{

td.Start();

}

catch (Exception ex)

{

td.Abort();

throw ex;

}

#endregion

ICallBackEventHandler 接口实现

< body >

< form id = " form1 " runat = " server " >

< cc1:ProgressControl ID = " ProgressControl1 " runat = " server " Height = " 35px " Width = " 535px " ProgressBackColor = " White " BackColor = " #FF8080 " BorderColor = " #C0C0FF " BorderStyle = " Solid " BorderWidth = " 20px " />

</ form >