逐步解說：搭配多個 UpdatePanel 控制項使用 ASP.NET Timer 控制項

發行項
10/22/2014

更新：2007 年 11 月

在這個逐步解說中，您將會使用 Timer 控制項來更新兩個 UpdatePanel 控制項的內容。Timer 控制項將放置在兩個 UpdatePanel 控制項的外部，並設定做為這兩個面板的觸發程序 (Trigger)。

必要條件

若要實作本逐步解說中的程序，您需要：

Microsoft Visual Studio 2005 或 Microsoft Visual Web Developer Express 版。
具備 AJAX 能力的 ASP.NET 網站。

依時間間隔來重新整理 UpdatePanel 控制項

建立新頁面並切換至 [設計] 檢視。
如果頁面尚未包含 ScriptManager 控制項，請在工具箱的 [AJAX 擴充功能] 索引標籤中按兩下 ScriptManager 控制項，以便將該控制項加入至頁面。

在工具箱中按兩下 Timer 控制項，以便將該控制項加入至網頁。

注意事項：
Timer 控制項可以位於 UpdatePanel 控制項的內部或外部，以便做為觸發程序。本範例說明如何在 UpdatePanel 控制項外部使用 Timer 控制項。如需在 UpdatePanel 控制項內部使用 Timer 控制項的範例，請參閱逐步解說：Timer 控制項簡介。

在 [工具箱] 中按兩下 UpdatePanel 控制項，以便將面板加入至頁面，然後將其 UpdateMode 屬性設定為 Conditional。
再按兩下 UpdatePanel 控制項，將第二個面板加入至頁面，然後將其 UpdateMode 屬性設定為 Conditional。
按一下名為 UpdatePanel1 的 UpdatePanel 控制項內部，並在工具箱的 [標準] 索引標籤中按兩下 Label 控制項，以便將該控制項加入至 UpdatePanel1。
將標籤的 Text 屬性設定為 [UpdatePanel1 尚未重新整理]。
將 Label 控制項加入至 UpdatePanel2。
將第二個標籤的 Text 屬性設定為 [UpdatePanel2 尚未重新整理]。

將 Timer 的 Interval 屬性設定為 10000。

Interval 屬性定義為以毫秒為單位，因此將 Interval 屬性設定為 10,000 毫秒，將會每隔 10 秒重新整理 UpdatePanel 控制項一次。

注意事項：
在這個範例中，計時器間隔設定為 10 秒。如此一來，當您執行範例時，不需要等待很長時間就能看到結果。然而，每個計時器間隔都會回傳至伺服器，並造成網路流量。因此，在實際執行應用程式中，您應該將計時器間隔設定為適合應用程式的最長時間。

按兩下 Timer 控制項，以建立 Tick 事件的處理常式。

將程式碼加入至處理常式，其中 [Label1] 和 [Label2] 控制項的 Text 屬性設定為目前時間。

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Label1.Text = "UpdatePanel1 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
        Label2.Text = "UpdatePanel2 refreshed at: " & _
          DateTime.Now.ToLongTimeString()
    End Sub
End Class

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();
    }
}

將 AsyncPostBackTrigger 控制項加入至兩個 UpdatePanel 控制項中，以指定 Timer1 做為 UpdatePanel1 和 UpdatePanel2 的觸發程序。您可依下列程式碼所示，以宣告方式來執行這個動作：

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

下列範例顯示完整頁面的標記。

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

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

<%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  />
        <div>
            <asp:Timer ID="Timer1" OnTick="Timer1_Tick"  Interval="10000">
            </asp:Timer>
        </div>
        <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="UpdatePanel1 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>
                <asp:Label ID="Label2"  Text="UpdatePanel2 not refreshed yet."></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>

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