やりたいこと

タイトルにある通りです。Blazor Server (.NET 6) にてアプリを実行し、ページを読み込んだときに別スレッドでメソッドを動かし、現在時刻を表示するようにしたいだけです。

実装例

こんな感じに実装してあげます。ポイントは、StateHasChanged() というメソッドを必ずつけることです。また、ページを読み込んだときに何かの処理をしたい場合は OnAfterRenderAsync メソッドが必要です。

@page "/"

<PageTitle>Hogehoge</PageTitle>

<h3>@Date.ToString("yyyy/MM/dd HH:mm:ss")</h3>

@code{
    public DateTime Date { get; set; } = DateTime.Now;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Clock();
        }
    }

    public async Task Clock()
    {
        while (true)
        {
            Date = DateTime.Now;
            await Task.Delay(100);
            StateHasChanged();
        }
    }
}

バインディングによってプロパティの値を参照できてはいますが、このままではコンポーネントで再描画されません。StateHasChanged() を使うことで、状態が変更されたことをコンポーネントに通知して、再描画する処理が実行されます。

f:id:takunology:20220308033133g:plain

この例では、DateTime.Now で現在時刻を取得し続けるスレッドを別で動作させており、Thread.Sleep(100) にて裏側では0.1秒ごとに Date プロパティを書き換えています。1秒ごとにしてしまうと、ページを読み込んだ際にズレが生じてしまうので、表示したい桁よりも早いペースで待機させるほうが良いかもしれません。