UpdateProgress控件

9.4 UpdateProgress控件

在现实的网络中，当我们打开某一个网站或链接时，由于种种原因经常要等待页面显示出来，这样的用户体验真的很差。如果能在页面执行较长时间操作的同时，给用户提供一个类似于浏览器状态栏那样的进度条，将会很大地改善用户体验。所以微软在ASP.NET Ajax中为我们提供了UpdateProgress控件，它可以轻松的实现这样的功能。

9.4.1 UpdateProgress控件概述

UpdateProgress控件用于当页面异步更新数据时，显示给用户友好的提示信息。该信息可以是文本信息，也可以是图片信息，用户可以根据自己的项目需要或自己的意愿进行选择。该控件的简单定义形式如下所示：

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

</ProgressTemplate>

</asp:UpdateProgress>

使用UpdateProgress控件很简单，在默认情况下，UpdageProgress控件将显示页面上所有的UpdatePanel控件更新的进度信息，在以前版本的UpdateProgress中，我们无法设置让UpdateProgress只显示某一个UpdatePanel的更新，而在最新版本的UpdateProgress控件中提供了AssociatedUpdatePanelID属性，可以指定UpdateProgress控件显示哪一个UpdatePanel控件。

9.4.2 UpdateProgress控件属性与方法

UpdateProgress控件的属性不是很多，它的主要属性如表9-4所示：

表9-4 UpdateProgress控件的属性

属性	说明
AssociatedUpdatePannelID	该属性和该UpdateProgress相关联的UpdatePanel的ID，通常用于有多个UpdatePanel的情况下
DisplayAfter	进度信息被展示后的ms数
DynamicLayout	UpdateProgress控件是否动态绘制，而不占用网页空间

9.4.3 UpdateProgress控件使用实例

在对UpdateProgress控件进行了介绍之后，下面通过两个实例来演示一下该控件是如何使用的。一个实例只使用单个UpdateProgress控件，而另一个则同时使用多个UpdateProgress控件，注意一下它们之间有什么不同。

1．使用单个UpdateProgress控件

在这个实例中，我们只使用单个UpdateProgress控件来演示它是如何使用的。首先我们需要创建一个显示文件upgDemo.aspx，它用于呈现一些文本内容及一个按钮。它的部分代码如下所示：

<div>

<asp:Label ID="lheader" runat="server" Font-Bold="True" Font-Size="Large" Text="使用UpdateProgress控件"></asp:Label><br />

<hr />

 </div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Label ID="linfo" runat="server" Text="单击下面按钮进行测试"></asp:Label><br />

<asp:Button ID="btTest" runat="server" OnClick="btTest_Click" Text="测试" /><br />

<asp:Label ID="lResult" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

Loading......

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

在上述代码中，我们分别添加一个ScriptManager控件、一个UpdatePanel控件和一个UpdateProgress控件。另外，应注意到我们在ID为btTest的按钮中设置了它的OnClick属性值为btTest_Click，也就是说当用户单击该按钮将调用源码文件upgDemo.aspx.cs中的方法btTest_Click()，它的代码如下所示：

protected void btTest_Click(object sender, EventArgs e)

{

//设置延迟时间，以便能显示UpdateProgress控件

System.Threading.Thread.Sleep(6000);

string strMsg = "欢迎访问IT在中国http://www.itzcn.com<br >";

strMsg += "当前时间是：" + DateTime.Now.ToString();

lResult.Text = strMsg;

}

上述代码很简单，首先产生相应的延迟，以便能使显示页面呈现UpdateProgress控件的内容，然后将一些字符串信息返回给显示页面。它的执行效果如图9-8、9-9所示：

图9-8 呈现UpdateProgress控件的效果图9-9 单击“测试”按钮后的最终效果

2．使用多个UpdateProgress控件

在这个实例中，我们使用多个UpdateProgress控件来演示它们是如何使用的。同样，我们需要先创建一个显示文件upgDemo2.aspx，它用于呈现一些文本内容及多个按钮。它的部分代码如下所示：

<div>

<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="使用多个UpdateProgress控件"></asp:Label><br />

</div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<asp:Label ID="Label2" runat="server" Text="你喜欢的水果是："></asp:Label>

<asp:DropDownList ID="drFruit" runat="server" OnSelectedIndexChanged="drFruit_SelectedIndexChanged">

<asp:ListItem Value="">请选择</asp:ListItem>

<asp:ListItem Value="香蕉">香蕉</asp:ListItem>

<asp:ListItem Value="苹果">苹果</asp:ListItem>

<asp:ListItem Value="桔子">桔子</asp:ListItem>

</asp:DropDownList>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<div id="iLoading1" style="color: #ff0000; font-family: 隶书; background-color: #99ccff;">Loading1......</div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

<asp:Label ID="Label3" runat="server" Text="请选择你要访问的网站："></asp:Label>

<asp:RadioButtonList ID="irblSite" runat="server" OnSelectedIndexChanged="irblSite_SelectedIndexChanged" >

<asp:ListItem Value="http://www.itzcn.com">IT在中国</asp:ListItem>

<asp:ListItem Value="http://www.itying.net">IT营</asp:ListItem>

</asp:RadioButtonList>

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">

<div id="iLoading2" style="font: smallcaption; color: #ffcc99; background-color: #99ccff">Loading2......</div>

</ProgressTemplate>

</asp:UpdateProgress>

</form>

在上述代码中，我们分别添加了一个ScriptManager控件、两个UpdatePanel控件、两个UpdateProgress控件和其他的一些页面元素。其中，同样调用了源码文件upgMemo.aspx.cs中的相应方法。代码如下所示：

protected void drFruit_SelectedIndexChanged(object sender, EventArgs e)

{

//设置延迟时间，以便能显示UpdateProgress1控件

System.Threading.Thread.Sleep(5000);

string strFruit = Request.Form["drFruit"];

string strMsg = "你最喜欢的水果是：" + strFruit;

strMsg += "<br />当前时间是：" + DateTime.Now.ToString();

lMsg1.Text = strMsg;

}

protected void irblSite_SelectedIndexChanged(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(6000);

string strSite = Request.Form["irblSite"];

string strMsg = "<a href=\'" +strSite + "\'>请单击此处转向要访问的网站</a>";

strMsg += "<br />当前时间是：" + DateTime.Now.ToString();

lMsg2.Text = strMsg;

}

上述代码的作用，同样是先通过响应的延迟来呈现相应的UpdateProgress控件，然后根据不同的请求进行不同的操作，最后将执行结果返回给显示页面。该案例的运行效果如图9-10与9-11所示：

图9-10 呈现UpdateProgress1的显示效果图9-11 呈现UpdateProgress2的显示效果

从图9-10与9-11中可以看出，两个UpdatePanel控件是互不响应的，它们分别调用各自的UpdateProgress控件。实际上这是通过设置UpdateProgress控件的AssociatedUpdatePanelID属性值来实现的。