UpdateProgress 控件介绍

项目
10/22/2014

更新：2007 年 11 月

在此教程中，您将使用 UpdateProgress 控件来显示部分页更新的进度。如果页包含 UpdatePanel 控件，则也可以包含 UpdateProgress 控件，以便通知用户部分页更新的状态。可以使用一个 UpdateProgress 控件来表示整个页的部分页更新的进度。或者，可以为每个 UpdatePanel 控件包含一个 UpdateProgress 控件。此教程中演示了这两种模式。

先决条件

若要在您自己的开发环境中实现这些过程，您需要：

Microsoft Visual Studio 2005 或 Visual Web Developer 速成版。
一个支持 AJAX 的 ASP.NET 网站。

使用单个 UpdateProgress 控件

首先使用单个 UpdateProgress 控件显示页面上的所有部分页更新的进度。

对整个页使用单个 UpdateProgress 控件

创建新页并切换到“设计”视图。
在工具箱的**“AJAX Extensions”**选项卡中，双击 ScriptManager 控件以将其添加到页面中。
双击 UpdatePanel 控件以将其添加到页面中。
双击 UpdateProgress 控件以将其添加到页面中。
在 UpdateProgress 控件内，添加文本“正在处理…”。
在 UpdatePanel 控件内，添加 Label 控件和 Button 控件。
将 Label 控件的 Text 属性设置为“呈现的初始页”。
双击 Button 控件，以便为该按钮的 Click 事件添加处理程序。

在 Click 处理程序中添加下列代码，人为地造成三秒钟的延迟，然后显示当前时间。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

说明：
出于本教程的需要，Click 事件的处理程序有意引入了延迟。在实际应用中，您不会引入延迟。相反，延迟是由服务器通信量或需要花很长时间处理的服务器代码造成的，例如长时间运行的数据库查询。

保存更改，然后按 Ctrl+F5 在浏览器中查看页面。

单击按钮。

经过短时间的延迟后，将显示进度消息。当 Click 事件的处理程序完成后，将隐藏进度消息，并且更新显示在面板中的时间。

示例的样式设置为可以更好地显示 UpdatePanel 表示的页面区域。

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1" runat="server" Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

使用多个 UpdateProgress 控件

页面上的一个 UpdateProgress 控件可以显示页面上的所有 UpdatePanel 控件的进度消息。源自 UpdatePanel 控件内部的异步回发将使 UpdateProgress 控件显示其消息。来自作为面板的触发器的控件的回发也会显示消息。

通过设置进度控件的 AssociatedUpdatePanelID 属性，可以使 UpdateProgress 控件与单个 UpdatePanel 控件关联。在这种情况下，仅当回发源自关联的 UpdatePanel 控件内部时，UpdateProgress 控件才显示消息。

在下一个过程中，将在页面中添加两个 UpdateProgress 控件，每个控件都与不同的 UpdatePanel 控件关联。

在一个页面上使用多个 UpdateProgress 控件

创建新页并切换到“设计”视图。
在工具箱的**“AJAX Extensions”**选项卡中，双击 ScriptManager 控件以将其添加到页面中。
双击 UpdatePanel 控件两次，以将该控件的两个实例添加到页面中。
在每个 UpdatePanel 控件中，添加一个 Label 控件和一个 Button 控件。
将这两个 Label 控件的 Text 属性均设置为“最初呈现的面板”。
双击每个 Button 控件，以便为每个按钮的 Click 事件添加处理程序。

在每个 Click 处理程序中添加下列代码，人为地造成三秒钟的延迟，然后显示当前时间。

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

切换到“设计”视图。
在第一个 UpdatePanel 控件内单击，添加一个 UpdateProgress 控件。
在 UpdateProgress 控件内，添加文本“Panel1 正在更新”。

这将设置 ProgressTemplate 属性。
选择 UpdateProgress 控件，并在“属性”窗口中将 AssociatedUpdatePanelID 属性设置为“UpdatePanel1”。
在第二个 UpdatePanel 控件内单击，添加另一个 UpdateProgress 控件。
将 UpdateProgress 控件的文本设置为“Panel2 正在更新”，并将其 AssociatedUpdatePanelID 属性设置为“UpdatePanel2”。
保存更改，然后按 Ctrl+F5 在浏览器中查看页面。
单击第一个面板中的按钮。

经过短时间的延迟后，将显示与第一个面板关联的进度消息，而不显示另一个 UpdateProgress 控件。

单击第二个面板中的按钮。

将显示与第二个面板关联的进度消息。

说明：
默认情况下，如果在上一个异步回发正在处理的过程中启动新的异步回发，将取消上一个回发。有关更多信息，请参见为特定异步回发赋予优先级。