Практика Blazor: приложение «Часы»

Рассмотрим пример приложения Blazor Server, реализующего обычные часы. Для этого создадим небольшой компонент Blazor и используем его на главной странице приложения.

Компонент Clock

Создадим новое приложение Blazor Server и добавим в папку Shared новый компонент Clock:

Наши часы должны отсчитывать время с интервалом в 1 секунду и отображать текущее время пользователю. Для выполнения этой задачи нам пригодиться компонент Timer из пространства имен System.Threading. Напишем следующий код компонента Clock:

@code {
    System.Threading.Timer? timer;
    DateTime time = DateTime.Now;


    private async void SetClock(object stateInfo)
    {
        time = DateTime.Now;
        await InvokeAsync(StateHasChanged); 
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        timer = new System.Threading.Timer(SetClock, new System.Threading.AutoResetEvent(false), 1000, 1000); 
    }
}

Учитывая знания о жизненном цикле компонентов Blazor, мы перегрузили в своем компоненте метод компонента OnInitializedAsync. В этом методе мы создали объект таймера (timer), передав ему в качестве метода обратного вызова метод SetClock. В методе SetClock мы присваиваем переменной time текущее значение даты/времени и сообщаем Blazor о том, что состояние компонента было изменено и необходимо перерисовать компонент (вызываем асинхронно метод StateHasChanged).

Теперь допишем компонент, дописав необходимую часть разметки пользовательского интерфейса:

@page "/clock"

<h3>Часы</h3>
@if (timer != null)
{
    <p>Дата: @time.ToString("D")</p>
    <p>Время: @time.ToString("T")</p>
}

Весь исходный код компонента Clock представлен ниже:

@page "/clock"

<h3>Часы</h3>
@if (timer != null)
{
    <p>Дата: @time.ToString("D")</p>
    <p>Время: @time.ToString("T")</p>
}

@code {
    System.Threading.Timer? timer;
    DateTime time = DateTime.Now;


    private async void SetClock(object stateInfo)
    {
        time = DateTime.Now;
        await InvokeAsync(StateHasChanged); 
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        timer = new System.Threading.Timer(SetClock, new System.Threading.AutoResetEvent(false), 1000, 1000); 
    }
}

Добавление компонента на главную страницу приложения

Откроем код компонента Pages/Index.razor и добавим наш компонент Clock сразу после заголовка:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<Clock/>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

Теперь можем запустить приложение и убедиться, что часы отсчитывают время с интервалом в 1 секунду:

Итого

Для разработки приложения «Часы» нам потребовалось немного, а именно — знания о жизненном цикле компонентов Blazor, основы работы с разметкой Razor и о том, как использовать класс System.Threading.Timer.