APS.NET 使用UpdatePanel时的进度条提示

 

介绍:

这篇文章中我将会给大家介绍如何创建一个自定义的页面更新时显示的进度条,它的属性如下:

a.       当点击一个按钮时,整个页面将无法操作。

b.       精度条会显示出来。

c.       进度条上有个取消的按钮能够操作。

d.       能够在页面上每个UpdatePanel中有一个这种进度条显示。

e.       你可以把这个进度条当做UpdatePanel或者是自定义的AJAX请求。

如果你想要理解这篇文章,首先你需要知道什么是asp.net ajax的UpdatePanel控件和什么是UpdateProgress控件。

让我们通过下面这个截图来找出答案:

 

如你所看到的,这里有个黄色的弹出框在页面中间。页面的其他部分被阴影覆盖,页面上的那个button不能点击。

这篇文章将分为两部分,一部分为理论,一部分为例子。如果你对理论没兴趣那么你可以直接跳过第一部分。

 

理论部分:

假设你处于这种境况: 你的页面中有一个UpdatePanel控件,当这个UpdatePanel更新的时候你想要显示一个进度条,这个更新时通过一个不可见的HTTP请求来实现,也就是说AJAX方法。这里有一点我们得注意,页面不会给出任何反馈当向服务器发送异步请求时。所以我们可以通过一个progeress bar来让用户知道他的请求正在进行。

 

 首先你需要知道两方面的信息:

a.       请求开始的时间

b.       请求结束的时间

使用微软的AJAX JavaScript库很容易实现这个，它里面有个对象叫做’PageRequestManager’,使用它可以注册事件。下面给出如何实例化这个对象的javascript:

var m = Sys.WebForms.PageRequestManager.getInstance();

然后是注册事件:

 

 

m.add_beginRequest([name of the function]);m.add_endRequest([name of the function]);  

 

下一步要做的是,如何来打断更新。幸运的是PageRequestManager也有这个功能。实现代码如下：

 

var manager = Sys.WebForms.PageRequestManager.getInstance();if (manager.get_isInAsyncPostBack()) { manager.abortPostBack();}

接下来我们需要做的是让页面的其它控件失去作用。这里有个ajaxcontroltool的控件ModalPopupExtender可以实现这个功能。下面这个图显示了ModalPopupExtender的Layout:

 

 

例子:

这部分是第二部分,以实例说明。

通过前面的理论我们可以创建一个更新进度条的控件。 它是个很简单的设计，包括3个div控件。第一个div显示信息，第二个div是进度条的显示,第三个div是取消按钮。

我们在asp.net页面的init部分设计这个进度条。

代码如下:

/// <summary>/// Creating controls./// </summary>/// protected override void OnInit(EventArgs e) { base.OnInit(e); // panel pnlMain = new Panel(); pnlMain.ID = "pnlMain"; pnlMain.CssClass = "uProg_modalPopup"; pnlMain.Style.Add("display", "none"); Controls.Add(pnlMain); // div message pnlMessage = new Panel(); pnlMessage.ID = "pnlMessage"; pnlMessage.CssClass = "uProg_messageDiv"; lblMessage = new Label(); pnlMessage.Controls.Add(lblMessage); pnlMain.Controls.Add(pnlMessage); // div progress pnlProgress = new Panel(); pnlProgress.ID = "pnlProgress"; pnlProgress.CssClass = "uProg_progressDiv"; image = new Image(); pnlProgress.Controls.Add(image); pnlMain.Controls.Add(pnlProgress); // div abort pnlAbort = new Panel(); pnlAbort.ID = "pnlAbort"; pnlAbort.CssClass = "uProg_abortDiv"; cmdAbort = new Button(); cmdAbort.Text = "Abort"; cmdAbort.OnClientClick = "global_progress.Abort();"; pnlAbort.Controls.Add(cmdAbort); pnlMain.Controls.Add(pnlAbort); // hidden button cmdHidden = new Button(); cmdHidden.ID = "cmdHidden"; cmdHidden.Style.Add("display", "none"); Controls.Add(cmdHidden); //extender extender = new ModalPopupExtender(); extender.BehaviorID = "beh_progress_extender"; extender.BackgroundCssClass = "uProg_modalBackground"; extender.PopupControlID = "pnlMain"; extender.DropShadow = true; extender.TargetControlID = "cmdHidden"; Controls.Add(extender); }  

然后是客户端的代码。因为我们能够直接扩展MS的AJAX Javascript库,我们这里创建一个类。

首先 注册命名空间:

// register namespaceType.registerNamespace("DotNetSources"); 然后是定义一个容器://// Constructor//DotNetSources.Progress = function DotNetSources$Progress(delay, extenderId) { this._delay = delay; this._extenderId = extenderId; this._requestIsInProgress = 0; this._timeOutId = null;}  

上面这几个参数都可以设置

下一步是注册事件:

//// Called in page load phase.//function DotNetSources$RegisterEvents() { var manager = Sys.WebForms.PageRequestManager.getInstance(); manager.add_beginRequest(global_progress.Show); manager.add_endRequest(global_progress.Hide);}

从前面的代码可以看出来我们现在需要定义一个show和hide方法。

//// Show progress panel including delay.//function DotNetSources$Show() { global_progress._requestIsInProgress = 1; // delay global_progress._timeOutId = setTimeout(global_progress.ShowInternal, global_progress._delay);}//// Show progress panel internal - do not count with delay.//function DotNetSources$ShowInternal() { if (global_progress._requestIsInProgress == 1) $find(global_progress._extenderId).show();} //// Hide progress panel immediately//function DotNetSources$Hide() { global_progress._requestIsInProgress = 0; clearInterval(global_progress._timeOutId); $find(global_progress._extenderId).hide();}

下一步是定义Abort方法和它的属性;

//// Abort an operation.//function DotNetSources$Abort() { clearInterval(global_progress._timeOutId); var manager = Sys.WebForms.PageRequestManager.getInstance(); if (manager.get_isInAsyncPostBack()) { manager.abortPostBack(); } this.Hide();} DotNetSources.Progress.prototype = { RegisterEvents: DotNetSources$RegisterEvents, Show: DotNetSources$Show, Hide: DotNetSources$Hide, Abort: DotNetSources$Abort, ShowInternal: DotNetSources$ShowInternal} DotNetSources.Progress.registerClass('DotNetSources.Progress');  

最后我们需要创建一个Progress类的javascript实例。必须在定义完后实例化。代码:

if (!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack) { // register script Assembly a = Assembly.GetAssembly(GetType()); StreamReader reader = new StreamReader(a.GetManifestResourceStream( "DotNetSources.Web.UI.scripts.DotNetSources_Progress.js")); string s = reader.ReadToEnd(); reader.Close(); string js = @"var global_progress = new DotNetSources.Progress(" + Delay.ToString() + ", '" + extender.BehaviorID + @"');Sys.Application.add_load(global_progress.RegisterEvents);"; s = string.Format("{0}{1}{2}", s, Environment.NewLine, js); ScriptManager.RegisterStartupScript(Page, GetType(), string.Empty, s, true);}  

我提供的代码中有css样式文件。

 

最后介绍两个方法来使用这个控件。

1.       在UpdatePanel中使用:

假设现在你在使用一个UpdatePanel在页面中。 你通过以下几步来使用UpdateProgress控件:

a.       引用DotNetSources.Web.UI.dll。

b.       添加一个css样式链接；

<link href="UpdateProgress.css" mce_href="UpdateProgress.css" rel="stylesheet" type="text/css" />

c.       在web.config文件的pages/controls节点处添加

<add tagprefix=""dns"" namespace=""DotNetSources.Web.UI"" assembly=""DotNetSources.Web.UI"" />   

d.       在你的页面中定义这个控件:

<dns:customupdateprogress runat="server" id="progress" progressimage="ajax-loader2.gif" text="Updating..." />

2.       在一个web service的调用中使用这个控件。

在完成了上面那个例子的几步后,如果你说是调用个web service,那么你要添加下面两个条件:

a.       当调用web Service的时候,添加如下代码: global_progress.Show()

b.       当web service返回信息时,添加如下代码: global_progress.Hide().

下面是个例子代码：

function BtnClick() { var sTestProxy = new WebServiceExample.MyService(); sTestProxy.set_defaultSucceededCallback(Success); sTestProxy.set_defaultFailedCallback(Failed); sTestProxy.GetValue(); global_progress.Show();} function Success(result) { global_progress.Hide(); $get("result").innerHTML = result;} function Failed(error, userContext, methodName) { global_progress.Hide(); if (error != null) { $get("result").innerHTML = error.GetMessage(); } else { $get("result").innerHTML = "Error is null."; }} 

 

需要代码的请留下email。