如何更新 c# blazor web 頁面中的實時日期時間

Question

我正在嘗試在 blazor 網頁中設置實時日期時間。 我嘗試使用 Datetime.now。 它沒有更新實時時間。 我想在不使用 javascript 的情況下做到這一點。

關於這個問題的任何幫助？

Answer 1

你需要一個定時器。 我能想到的最短樣本：

@page "/"
@using System.Threading    
@implements IDisposable

<p>@theTime</p>

@code{

    string theTime;    
    Timer aTimer;

    protected override void OnInitialized()
    {
        aTimer = new Timer(Tick, null, 0, 1000);        
    }

    private void Tick(object _)
    {
        theTime = DateTime.Now.ToLongTimeString();
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        aTimer?.Dispose();
    }
}

Answer 2

類似的，使用“System.Timers”

@page "/digitalclock"
@using System.Timers
@implements IDisposable

<PageTitle>Digital Clock</PageTitle>

<h1>@currentTime</h1>

@code {
   private string currentTime = DateTime.Now.ToString("HH:mm:ss tt");
   
   private Timer? secondsTimer;

   protected override void OnInitialized()
   {
      //one second interval
      secondsTimer = new Timer(1000);
      secondsTimer.Enabled = true;
      secondsTimer.AutoReset = true;
      secondsTimer.Elapsed += (sender, e) => UpdateTime();
   }

  private void UpdateTime()
  {
     currentTime = DateTime.Now.ToString("HH:mm:ss tt");
     InvokeAsync(() =>
     {
         StateHasChanged();
     });
  }

  public void Dispose()
  {
      secondsTimer?.Dispose();
  }
}