如何在ASP.NET中实现无页面刷新的时间自动更新？

你现在遇到的问题很典型——后端ASP.NET在页面加载时生成的时间是静态的，页面发到浏览器后就不会再变了，除非刷新页面重新请求服务器。要实现不刷新自动更新，得结合前端JavaScript来做，这里给你两种常用方案，看你需求选：

方案1：显示客户端本地时间（简单高效） #

这种方案直接用浏览器的本地时间来更新，不用再跟服务器交互，性能最好，适合对时间准确性要求不严格、只需要同步用户本地系统时间的场景。

后端代码（保留原有初始渲染逻辑） #

假设你用Label控件显示时间：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始加载时设置服务器时间（也可以留空，让前端第一次加载就用本地时间）
        lblCurrentTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }
}

前端JavaScript（添加到MasterPage的HTML中） #

在页面的<head>或者<body>末尾加这段脚本，它会每秒更新时间显示：

<script>
    // 获取页面上显示时间的元素（WebForms控件的客户端ID需用此方式获取）
    const timeDisplay = document.getElementById('<%= lblCurrentTime.ClientID %>');

    function refreshTime() {
        const now = new Date();
        // 格式化时间，和后端格式保持一致
        const formattedTime = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
        // 更新页面显示
        timeDisplay.textContent = formattedTime;
    }

    // 每秒执行一次刷新函数
    setInterval(refreshTime, 1000);
    // 页面加载完成后立即执行一次，确保显示连贯
    window.addEventListener('load', refreshTime);
</script>

方案2：显示服务器时间（确保时间一致性） #

如果你的业务要求必须显示服务器的时间（比如怕客户端时间被修改、需要统一展示服务器端时间），那就要定时通过AJAX请求后端获取最新时间：

后端添加获取服务器时间的方法 #

在MasterPage的后台代码里加一个WebMethod：

using System.Web.Services;

public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblCurrentTime.Text = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
        }
    }

    [WebMethod]
    public static string GetLatestServerTime()
    {
        return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }
}

前端AJAX请求脚本 #

这里用jQuery简化AJAX操作（如果项目已引入jQuery可跳过引入步骤）：

<!-- 引入jQuery，项目已有则无需重复添加 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    const timeDisplay = document.getElementById('<%= lblCurrentTime.ClientID %>');

    function fetchServerTime() {
        $.ajax({
            type: "POST",
            url: "MasterPage.master/GetLatestServerTime",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                // 更新页面显示的服务器时间
                timeDisplay.textContent = response.d;
            }
        });
    }

    // 每10秒请求一次（避免过于频繁增加服务器压力）
    setInterval(fetchServerTime, 10000);
    window.addEventListener('load', fetchServerTime);
</script>

关键注意点 #

• 控件ID获取：WebForms中服务器控件的客户端ID可能和后端定义的ID不同，必须用<%= lblCurrentTime.ClientID %>获取实际客户端ID，否则前端无法找到元素。
• 格式统一：后端和前端的时间格式化逻辑尽量保持一致，避免显示风格跳变。
• 性能优化：使用服务器时间方案时，请求间隔建议设为10-30秒，没必要每秒请求一次。

内容的提问来源于stack exchange，提问作者Anonim