Share via

教程：如何按规定的时间间隔刷新 UpdatePanel 控件

  • 项目

在本演练中，您将使用以下三个 ASP.NET AJAX 服务器控件来在规定的时间间隔更新网页的组成部分： ScriptManager 控件、 UpdatePanel 控件和 Timer 控件。向网页中添加这些控件后，就不必在每次回发时刷新整个网页。只有 UpdatePanel 控件的内容将会更新。

所有 ASP.NET AJAX 控件都需要 web.config 文件中的特定设置才能正常运行。如果您试图使用这些控件之一，但您的网站不包含所需的 web.config 文件，则网页的“设计”视图中本应显示该控件之处会出现错误。在“设计”视图中，如果您单击处于该状态的控件，则 Microsoft Expression Web 会让您选择要创建一个新的 web.config 文件还是更新现有的 web.config 文件。

在规定的时间间隔刷新 UpdatePanel 控件

  1. 在“文件”菜单上，指向“新建”，然后单击“ASPX”。

  2. 将光标置于 ASPX 网页的“设计”视图中。

  3. 在“工具箱”面板中，在“ASP.NET 控件”下的“AJAX”下，双击 ScriptManager 控件以将其添加到该网页中。如果出现一个对话框询问是否要添加或更新 web.config 文件以支持 .NET Framework 版本 3.5，请单击“是”。如果出现一个对话框询问是否要对非可视控件启用视觉帮助，请单击“是”。

  4. 在“工具箱”面板中，在“ASP.NET 控件”下的“AJAX”下，双击 UpdatePanel 控件以将其添加到该网页中。

  5. 将光标放在“设计”视图中的 UpdatePanel 控件内。

  6. 在“工具箱”面板中，在“ASP.NET 控件”和“AJAX”类别下，双击 Timer 控件，将其插入网页上的 UpdatePanel 控件中。

    Cc295400.6d8eaf6e-b015-4738-b33f-31bac4a9b0ef(zh-cn,Expression.40).png

    Note注意：

    Timer 控件可以充当 UpdatePanel 控件内部或外部的触发器。本示例演示如何在 UpdatePanel 控件内使用 Timer 控件。有关将 Timer 控件用作 UpdatePanel 控件外部的触发器的示例，请参阅 MSDN Library 中的演练：对多个 UpdatePanel 控件使用 ASP.NET Timer 控件 Cc295400.xtlink_newWindow(zh-cn,Expression.40).png。尽管该主题是针对 Microsoft Visual Web Developer 编写的，但是您仍可在 Microsoft Expression Web 中按照其执行操作，只有少数一些情况例外。

  7. 在网页中选中 Timer 控件，在“标记属性”面板中，将“Interval”属性设置为 10000。Interval 属性以毫秒为单位定义，因此，如果“Interval”属性设置为 10,000 毫秒，则会每隔 10 秒钟刷新一次该 UpdatePanel 控件。

    Note注意：

    在本示例中，计时器间隔设置为 10 秒。这样，当您运行该示例时，不必等很长时间就能看到结果。但是，每个计时器间隔都会导致回发到服务器并增加网络通信量。因此，在生产应用程序中，应该将此间隔设为仍然适用于您的应用程序的最长时间。

  8. 将光标放在“设计”视图中的 UpdatePanel 控件中。

  9. 在“工具箱”面板中，在“ASP.NET 控件”和“标准”类别下，双击 Label 控件，将其插入 UpdatePanel 控件中。

  10. 在网页中选中 Label 控件，在“标记属性”面板的“文本”框中，键入 面板尚未刷新 。

  11. 将光标放在 UpdatePanel 控件之外。

  12. 在“工具箱”面板中，在“ASP.NET 控件”和“标准”类别下，双击 Label 控件，再向该网页添加一个标签。

    Note注意：

    请确保将第二个 Label 控件添加在 UpdatePanel 控件之外。

    Cc295400.e14384c1-a32c-4924-b012-dbbb44643f09(zh-cn,Expression.40).png

  13. 在网页的“代码”视图中，在 </head> 标记之前，根据网页的“网页语言”添加下面的代码示例之一：

    <script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>

    <script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>

  14. 在“代码”视图中，找到标记 <asp:Timer runat="server" id="Timer1" Interval="10000"> 并向其中添加 OnTick="Timer1_Tick"。

  15. 在“文件”菜单上，单击“保存”。

  16. 按 F12 在您的 Web 浏览器中预览该网页。请等待至少 10 秒，以便 UpdatePanel 面板得到刷新。面板内的文本将更改，以显示上次刷新该面板的内容的时间。但是，面板外部的文本不会刷新。

下表显示最终的网页代码。

Visual Basic 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="VB" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/vb">
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs)
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString()
End Sub 
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>
C# 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script runat="server" type="text/c#">
  protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" id="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate>
<asp:Timer runat="server" id="Timer1" Interval="10000" OnTick="Timer1_Tick"></asp:Timer>
<asp:Label runat="server" Text="Page not refreshed yet." id="Label1">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label runat="server" Text="Label" id="Label2"></asp:Label>
</form>
</body>
</html>

本演练介绍了如何使用 Timer 控件和 UpdatePanel 控件来启用部分页更新的基本概念。必须将 ScriptManager 控件添加到包含 UpdatePanel 控件或 Timer 控件的任何网页。默认情况下，面板内的 Timer 控件将导致在异步回发过程中仅刷新该面板。如果将面板外的 Timer 控件配置为该面板的触发器，则会导致刷新 UpdatePanel 。

另请参阅

概念

Timer 控件
UpdatePanel 控件
ScriptManager 控件
部分页呈现概述