ASP.NET 即時顯示時間：AJAX Timer + UpdatePanel 零刷新實作

前言：不想整頁重新整理也要看即時時鐘？

ASP.NET AJAX 控制項（.NET 3.5 內建）提供 ScriptManager、UpdatePanel、Timer 三大核心元件，幾行標記即可實現「每秒更新一次 Label 文字」的即時時鐘，無需撰寫 JavaScript。本文提供完整 .aspx 與 .aspx.cs 代碼，並說明關鍵屬性設定與常見誤區。

完整前台代碼 (ShowCurrentTime.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowCurrentTime.aspx.cs" Inherits="ShowCurrentTime" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>動態顯示即時時間</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <table style="margin:100px auto; width:270px; height:78px;">
            <tr><td>動態顯示即時時間</td></tr>
            <tr>
                <td style="height:100px;">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            當前時間是：
                            <asp:Label ID="Label1" runat="server" Text="Label" />
                            <asp:Timer ID="Timer1" runat="server" Interval="1000" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

後台代碼 (ShowCurrentTime.aspx.cs)

public partial class ShowCurrentTime : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }
}

關鍵點解析

1. ScriptManager：每頁**僅能有一個**，負責注入 AJAX 客戶端腳本庫、管理部分渲染管線。
2. UpdatePanel：定義「部分更新區域」，內部控制項觸發 PostBack 時，僅重渲染此區域 HTML 並回傳給瀏覽器替換。
3. Timer：設定 Interval="1000"（毫秒），每隔指定時間自動觸發非同步 PostBack。必須置於 UpdatePanel 內部，否則會導致整頁重新整理。
4. Label 文字更新：每次 Timer Tick 觸發 Page_Load，重新指派 DateTime.Now.ToString()，經 UpdatePanel 部分渲染後回傳瀏覽器。

進階客製化

• 只顯示日期：Label1.Text = DateTime.Now.ToString("yyyy-MM-dd"); 或 .ToShortDateString()。
• 自訂格式：DateTime.Now.ToString("HH:mm:ss.fff") 顯示毫秒。
• 樣式美化：對 Label 加上 CssClass，配合 CSS 設定字體、顏色、閃爍動畫。
• 停用 Timer：Timer1.Enabled = false; 可在伺服器端條件式停止更新。

常見誤區與避坑

現代化替代方案

新專案建議：前端純 JS setInterval + WebAPI / SignalR，完全移除 ViewState、UpdatePanel 開銷，支援 .NET Core 跨平台、行動裝置效能更佳。

總結

UpdatePanel + Timer 是 WebForms 時代「零 JS 寫即時 UI」的經典組合。理解其部分渲染管線、ViewState 影響、Timer 位置限制，即可在維護舊專案時快速交付、避開坑點。新架構請拥抱前後端分離模式。

1. 上一篇文章： ASP.NET 索引器完整指南：語法、特性、多參數與重載實戰
2. 下一篇文章： ASP.NET <script runat="server"> 用法與最佳實務

ASP.NET 基礎

GMap.NET 客製化 Marker 完整指南：自訂圖標、拖曳移動、滑鼠高亮、閃爍動畫與完整 WinForms 範例

GMap.NET 圖層架構速覽 GMapControl

ASP.NET Core 與 ASP.NET Framework 共享身份驗證：從 DataProtection 到跨框架 Ticket 互通

背景與挑戰 遷移至 .NET Core 時，舊有 .NET

Visual Studio 2015 正式版完整安裝圖文教學 (Enterprise、Update 3、跨平台工具、Azure、SQL、Xamarin)

Visual Studio 2015 正式版 (RTM) 於

Silverlight 4 多語言實作完整指南：資源檔、繫結與動態切換

建立多語言資源檔 在專案中新增資料夾 Resource，加