首页 > 解决方案 > 在 Blazor 应用中完成计时器后显示消息

问题描述

我在剃刀组件上的 Blazor 应用程序中制作了一个计时器。它工作正常,但我想添加其他内容,例如当计时器完成时显示一条消息,例如“完成”或“计时器完成”或任何其他消息。这是代码:

@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();
     }
    }
   }  

标签: c#htmlvisual-studio-2019blazorrazor-components

解决方案


在您的剃须刀组件中:

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

推荐阅读