在 Blazor 应用程序中完成计时器后显示消息

Question

我在剃须刀组件的 Blazor 应用程序中制作了一个计时器。它工作正常，但我想添加其他内容，例如计时器完成后显示一条消息，例如 'Finish' 或 'Timer is done' 或任何其他消息。这是代码：

@page "/Counting"
<h1>Counter</h1>   
<p>Current count: @_currentCount</p>
<p>@value</p>
<p>Stop: @stop</p>
<p>Date: @date</p>
<p>diff: @x</p>

@code {
Timer _updateTimer;
int _currentCount = 0;
TimeSpan value= new TimeSpan(0,0,0);
DateTime date;
DateTime stop;
double x;

public void Dispose()
    {
       //_updateTimer.Dispose();
    }
  protected override async Task OnInitializedAsync()
{
  _updateTimer = new Timer(state => { InvokeAsync(UpdateCounter); }, null, 0, 500);
  await Counter();
}
 async Task UpdateCounter()
{
    //_currentCount = 0;
   //await Task.Delay(1000);
   _currentCount++;
   await Task.Delay(1000);
   //_currentCount++;
   StateHasChanged();
 }
  async Task Counter()
{
   while (true)
{
   date = DateTime.Now;
   stop = new DateTime(2020,3,21, 12,20,0);
   value = value.Add(new TimeSpan(0, 0, 1));
   x = (stop - date).TotalSeconds;
   if (x < 0  )
        {
            return;
        }
       await Task.Delay(1000);
       StateHasChanged();
     }
    }
   }

Answer 1

在你的剃须刀组件中：

@if (x < 0)
{
    <div class="alert alert-info">Timer is done</div>
}

在 Blazor 应用程序中完成计时器后显示消息

Showing a message after timer is done in a Blazor app

html

c#

blazor

visual-studio-2019

razor-components