教學課程：如何定時重新整理 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.alert_note(zh-tw,Expression.10).gif注意事項：

    Timer 控制項可做為 UpdatePanel 控制項內部或外部的觸發程序。此範例說明如何使用 UpdatePanel 控制項內的 Timer 控制項。如需使用 Timer 控制項做為 UpdatePanel 控制項之外部觸發程序的範例，請參閱 MSDN Library 中的逐步解說：並用 ASP.NET 的 Timer 控制項與多個 UpdatePanel 控制項 (英文)。雖然該主題是針對 Microsoft Visual Web Developer 所編寫，但其內容仍值得參考，只要注意 Microsoft Expression Web 中的少數例外即可。

  7. 在您的網頁中選取 Timer 控制項後，請在 [標籤屬性] 工作窗格中將 [間隔] 屬性設為 10000。[間隔] 屬性以毫秒為單位定義，因此若將 [間隔] 屬性設為 10,000 毫秒，則會每隔 10 秒重新整理 UpdatePanel 控制項一次。

    Cc295400.alert_note(zh-tw,Expression.10).gif注意事項：

    在此範例中，計時器間隔設為 10 秒。因此，您在執行範例時不需等很久即可看見結果。但每個計時器間隔都會產生傳給伺服器的回傳，並造成網路流量。因此，在實際執行的應用程式中，應將間隔設為應用程式適用範圍內的最長時間。

  8. 將游標置於 [設計] 檢視的 UpdatePanel 控制項中。

  9. 在 [工具箱] 工作窗格中的 [ASP.NET 控制項] 與 [標準] 類別下方按兩下 [Label] 控制項，以將其插入 UpdatePanel 控制項中。

  10. 在網頁中選取 Label 控制項後，請在 [標籤屬性] 工作窗格的 [文字] 方塊中，鍵入「面板尚未重新整理」。

  11. 將游標置於 UpdatePanel 控制項外。

  12. 在 [工具箱] 工作窗格中的 [ASP.NET 控制項] 與 [標準] 類別下方按兩下 [Label] 控制項，在網頁中新增第二個標籤。

    Cc295400.alert_note(zh-tw,Expression.10).gif注意事項：

    請確實將第二個 Label 控制項新增於 UpdatePanel 控制項之外。

  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 在網頁瀏覽器中預覽網頁。請至少等待 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 控制項

部分網頁呈現概觀