9.4 UpdateProgress控件
在现实的网络中，当我们打开某一个网站或链接时，由于种种原因经常要等待页面显示出来，这样的用户体验真的很差。如果能在页面执行较长时间操作的同时，给用户提供一个类似于浏览器状态栏那样的进度条，将会很大地改善用户体验。所以微软在ASP.NET Ajax中为我们提供了UpdateProgress控件，它可以轻松的实现这样的功能。
9.4.1 UpdateProgress控件概述
UpdateProgress控件用于当页面异步更新数据时，显示给用户友好的提示信息。该信息可以是文本信息，也可以是图片信息，用户可以根据自己的项目需要或自己的意愿进行选择。该控件的简单定义形式如下所示：
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<!--表示进度的信息-->
</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，它用于呈现一些文本内容及一个按钮。它的部分代码如下所示：
<form id="form1" runat="server">
<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">
<ContentTemplate>
<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">
<ProgressTemplate >
<div id="iLoading" style="font-weight: bold; font-size: large; left: 20px; text-transform: capitalize; color: red; font-family: Monospace; position: absolute; top: 50px; background-color: #99ccff;">
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，它用于呈现一些文本内容及多个按钮。它的部分代码如下所示：
<form id="form1" runat="server" method="post">
<div>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Text="使用多个UpdateProgress控件"></asp:Label><br />
<hr style="border:2px solid #000000;" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<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>
<br /><asp:Label ID="lMsg1" runat="server" ></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div id="iLoading1" style="color: #ff0000; font-family: 隶书; background-color: #99ccff;">Loading1......</div>
</ProgressTemplate>
</asp:UpdateProgress>
<hr style="border:1px solid #99ccff;" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<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>
<br /><asp:Label ID="lMsg2" runat="server" ></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<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属性值来实现的。
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
