Search code examples
c#htmlvisual-studio-2019blazorrazor-components

Showing a message after timer is done in a Blazor app


I made a timer in a Blazor app on a razor component. It is working normally but i want to add something else, like when timer is done show a message for example 'Finish' or 'Timer is done' or any other message. Here is the code:

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

Solution

  • In your razor component:

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