ASP.NET - 演练：对多个 UpdatePanel 控件使用 ASP.NET Timer 控件

来源：互联网发布：淘宝宝贝描述源代码编辑：程序博客网时间：2024/04/29 09:16

在本演练中，将使用一个 Timer 控件来更新两个 UpdatePanel 控件的内容。将 Timer 控件放置在两个 UpdatePanel 控件之外，并将其配置为这两个面板的触发器。

1、创建新页并切换到“设计”视图。

2、如果页面尚未包含 ScriptManager 控件，请在工具箱的“AJAX Extensions”选项卡中双击 ScriptManager 控件以将其添加到页面中。

3、在工具箱中双击 Timer 控件以将其添加到网页上。

说明：

Timer 控件可在 UpdatePanel 控件的内部或外部用作一个触发器。本示例演示如何在 UpdatePanel 控件外部使用 Timer 控件。

4、在工具箱中双击 UpdatePanel 控件以添加一个面板到页面上，然后将该面板的 UpdateMode 属性设置为 Conditional。

5、再次双击 UpdatePanel 控件以添加另一个面板到页面上，然后将该面板的 UpdateMode 属性设置为 Conditional。

6、单击名为 UpdatePanel1 的 UpdatePanel 控件内部，然后在工具箱的“标准”选项卡中双击 Label 控件，将其添加到 UpdatePanel1。

7、将该标签的 Text 属性设置为“UpdatePanel1 尚未刷新”。

8、将 Label 控件添加到 UpdatePanel2。

9、将第二个标签的 Text 属性设置为“UpdatePanel2 尚未刷新”。

10、将 Timer 的 Interval 属性设置为 10000。

Interval 属性是以毫秒为单位定义的，因此，若将 Interval 属性设置为 10,000 毫秒，则会每 10 秒刷新一次 UpdatePanel 控件。

说明：在此示例中，计时器时间间隔设置为 10 秒。这样，在运行示例时，您无需等待很长时间就可以看到结果了。但是，每个计时器时间间隔都会导致向服务器回发，从而引起网络通信。因此在成品应用程序中，应将此时间间隔设置为在应用中可行的最长时间。

11、双击 Timer 控件以便为 Tick 事件创建处理程序。

12、向创建的处理程序中添加代码，以便将 Label1 和 Label2 控件的 Text 属性设置为当前时间。

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void Timer1_Tick(object sender, EventArgs e)

{

Label1.Text = "UpdatePanel1 refreshed at: " +

DateTime.Now.ToLongTimeString();

Label2.Text = "UpdatePanel2 refreshed at: " +

DateTime.Now.ToLongTimeString();

}

13、通过将 AsyncPostBackTrigger 控件添加到两个 UpdatePanel 控件中，将 Timer1 指定为 UpdatePanel1 和 UpdatePanel2 的触发器。这可以通过声明的方式来实现，如以下代码所示：

<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

下面的示例演示完整页的标记。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html >

<title>Untitled Page</title>

</head>

<body>

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

<div>

<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">

</asp:Timer>

</div>

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

<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

<asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

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

<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

<asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

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

15、请等待至少 10 秒钟，直到刷新 UpdatePanel 控件。两个面板都会显示更新的时间。