Live reloads for Blazor - and a simple clock component

This article will test out Blazor. I had some difficulties with getting live reload to work. I got it working in Visual Studio 2019 for the Blazor Asp.Net Core project template. We will also create a very simple component (a clock) that calls Javascript function from C#. You can clone the simple app of mine from Github like this:

 
 
 git clone https://github.com/toreaurstadboss/BlazorLiveReloadSample.git
 
 

First off, we add the following into _host.cshtml :

 
_Host.cshtml
 
    <script src="js/script.js"></script>
    <script src="_framework/blazor.server.js"></script>

    <script>
        Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
            document.location.reload();
        }
    </script>
 
 

The Blazor.defaultReconnectionHandler._reconnectCallback is set to reload the document location This makes the page reload when you edit the razor files of the Blazor app. You will see this as a temporarily recompile step - give it some 5 seconds in a simple app.

Let's for fun add a clock component also. Add to the Shared folder the file Clock.razor.

 
Clock.razor
 
@inject IJSRuntime JsRunTime
@implements IDisposable

The time is now:
00:00:00


@code {

    ElementReference timeDiv;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRunTime.InvokeVoidAsync("startTime", timeDiv);
        }
    }

    public void Dispose()
    {
        JsRunTime.InvokeVoidAsync("stopTime");
    }

}

 

And we have also the script.js file in wwwroot to add some Javascript (Blazor razor files dont like Js in the component itself, just make sure to add the Js somewhere in wwwroot instead which loads up the necessary Js). As you can see we inject with the @inject in the razor Blazor file (rhymes a bit) the IJsRunTime. This allows us to call client-side code from the C# code. We start off the clock with a setTimeout and stop the clock with a clearTimeout.

 
Clock.razor
 

var clock;
function startTime(element) {
	let timeString = new Date().toLocaleTimeString('nb-No', { hour: 'numeric', hour12: false, minute: 'numeric', second: 'numeric' });
	element.innerHTML = timeString;
	clock = setTimeout(startTime.bind(null, element), 1000);
}
function stopTime() {
	clearTimeout(clock);
}