Create a Blazor Timer Service and Navigate Programmatically
Tags: dotnet, csharp, tutorial, webdev
Published: 2019-11-05 11:41:56

---
title: Create a Blazor Timer Service and Navigate Programmatically
published: true
tags: dotnet, csharp, tutorial, webdev
canonical_url: https://wellsb.com/csharp/aspnet/blazor-timer-navigate-programmatically/
---

[Original](https://wellsb.com/csharp/aspnet/blazor-timer-navigate-programmatically/)

In this Blazor tutorial, you will learn how to create a timer. You will also learn how to navigate to pages from your C# code programmatically using NavigationManager.

For the purposes of this tutorial, you will consider a scenario where an event is raised by a timer service in a Blazor application. This event will be handled by some event handler method, and you will navigate to another page in our web app from this event handler instead of by clicking a link.

## Create a Blazor Timer Service

To create a service, follow the procedure from the previous tutorial about [how to register a C# service in a Blazor app](https://wellsb.com/csharp/aspnet/blazor-singleton-pass-data-between-pages/). Within your Blazor project, create a **Services** folder and add a C# class to it, called **BlazorTimer.cs**. The **BlazorTimer** class should include a public `SetTimer()` method that will be used to start a timer. It should also define an event to be raised once the timer reaches zero.

Consider the following Blazor timer service class:

```csharp
using System;
using System.Timers;
 
namespace TimerService.Services
{
    public class BlazorTimer
    {
        private Timer _timer;
 
        public void SetTimer(double interval)
        {
            _timer = new Timer(interval);
            _timer.Elapsed += NotifyTimerElapsed;
            _timer.Enabled = true;
        }
 
        public event Action OnElapsed;
 
        private void NotifyTimerElapsed(Object source, ElapsedEventArgs e)
        {
            OnElapsed?.Invoke();
            _timer.Dispose();
        }
    }
}

```

This class uses a private Timer field, because there is no need to access the Timer outside of this class. If you do need direct access to the Timer in your use-case, feel free to make the necessary adjustments. The `SetTimer()` method takes a `double` argument corresponding to the duration of the timer, in milliseconds. The timer begins when `_timer.Enabled` is set to `true`.

Observe that an [event handler](https://wellsb.com/csharp/learn/csharp-event-handler-example/), `NotifyTimerElapsed`, has been attached to the `Timer.Elapsed` event on Line 13. `NotifyTimerElapsed()` simply invokes the `OnElapsed` action delegate and disposes of the timer. The `OnElapsed` delegate, declared on Line 17, will be used to assign and attach a handler method from outside the class.

The C# class is complete, but it must be registered as a service in the web app’s **Startup.cs** file.

```csharp
public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<Services.BlazorTimer>();
}
```

Since you don’t need a single instance of this timer service across the entire lifetime of the app, just add it as a `transient` service instead of a singleton. In a transient service, a new instance will be issued each time one is requested.

## Inject Service Into Blazor Page

Recall that to use a service within a component of your application, it must be injected as a dependency. Since the **BlazorTimer** class is located within the **Services** directory, your `@inject` statement will look like the following, where **Timer** is the name you will reference the service by on the current page.

```csharp
@inject Services.BlazorTimer Timer
```

Inject the timer you just created onto the Index page, **Index.razor**. In the following snippet, I am using a button to start a 5 second timer.

```csharp
@inject Services.BlazorTimer Timer
@page "/"
 
<h1>Blazor Timer</h1>
 
<button @onclick="StartTimer">Start Timer</button>
 
@code {
    private void StartTimer()
    {
        Timer.SetTimer(5000);
        Timer.OnElapsed += TimerElapsedHandler;
        Console.WriteLine("Timer Started.");
    }
 
    private void TimerElapsedHandler()
    {
        Console.WriteLine("Timer Elapsed.");
    }
}
```

The button’s `@onclick` event is handled by the C# method, `StartTimer()`. `StartTimer()` also assigns the `TimerElapsedHandler()` method to the `OnElapsed` delegate you created earlier in **BlazorTimer.cs**. Therefore, this page’s `TimerElapsedHandler()` will also be invoked when the timer’s Elapsed event is raised.

Once the button is clicked, the timer will begin and “Timer Started.” will be printed to your browser’s JavaScript console. Five seconds later, the timer will elapse, and “Timer Elapsed.” will print to the console.

## Navigate to Page Programmatically

Now, suppose you want to navigate to a different page once the timer reaches zero. This could be useful if you were using Blazor to develop a browser-based game, or just a simple countdown timer webapp.

To navigate to a different page programmatically in Blazor, you must inject the `NavigationManager` service.

```csharp
@inject NavigationManager NavManager
```

`NavigationManager` is a service that is automatically added to your Blazor app’s `IServiceCollection` by default, so you do not need to register it yourself. It offers a number of [member methods](https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#uri-and-navigation-state-helpers), but you will use the `NavigateTo()` method in this example.

Suppose you have created a page called **CountdownComplete.razor** with the following content.

```html
@page "/countdowncomplete"
<h3>Time's up!</h3>
<p>You have been redirected to this page because the Blazor timer reached 0.</p>
```

Notice, this page is accessed from the route _/countdowncomplete_. Back in your **Index.razor** page, you could navigate to this page by passing the route to the `NavigateTo()` method of the `NavigationManager` service.

```csharp
private void TimerElapsedHandler()
{
    Console.WriteLine("Timer Elapsed.");
    NavManager.NavigateTo("countdowncomplete");
}
```

Your complete **Index.razor** may look like the following:

```csharp
@inject Services.BlazorTimer Timer
@inject NavigationManager NavManager
@page "/"
 
<h1>Blazor Timer</h1>
 
<button @onclick="StartTimer">Start Timer</button>
 
@code {
    private void StartTimer()
    {
        Timer.SetTimer(5000);
        Timer.OnElapsed += TimerElapsedHandler;
        Console.WriteLine("Timer Started.");
    }
 
    private void TimerElapsedHandler()
    {
        Console.WriteLine("Timer Elapsed.");
        NavManager.NavigateTo("countdowncomplete");
    }
}
```

## The Bottom Line

In this tutorial, you learned how to create a timer service in Blazor. You also learned how to add an event to the class, and how to attach event handlers to the event. Specifically, you learned about adding an event handler from within the class and from outside the class by using a delegate. As an exercise, try to extend this service in order to display the countdown timer on the current page. This tutorial also taught you a technique for navigating to a new page in your Blazor application from within C# code by using the `NavigationManager`. This is helpful when you want to take the user to specific page when a particular event is raised instead of when a link is clicked.

The source code for this project is [available on GitHub](https://github.com/bradwellsb/blazor-service-samples/tree/master/TimerService). If you found this tutorial helpful, leave me an encouraging note in the comments. If you have any questions, feel free to ask.

[Source](https://wellsb.com/csharp/aspnet/blazor-timer-navigate-programmatically/)