alt text

I’m very excited about Blazor, especially the WebAssembly mode. Scott Allen has a good write up.

After exploring for a while, as I’m starting a greenfield applications now, I’ve decided it is still too early to adopt.

What is Blazor

Blazor Documentation Introduction

My previous article on Default Starting point for a web app is good to see Scott Hanselman putting a sample app together.


Blazor apps are based on components usually written as a .razor file. Razor is a syntax for combining HTML and C#.

// Components/Counter.razor
@using Microsoft.AspNetCore.Components.Web

// One way data binding 
<p>Current count: @currentCount</p>

<button @onclick="IncrementCount">Click me</button>

@code {
    // Private field - encapsulate a property with a private setter? 
    int currentCount; 
    // Function that increments the field
    void IncrementCount() => currentCount++;

I find it easier to start with a Razor pages project then add in Blazor support:

// Startup.cs
// in ConfigureServices
// in Configure, app.UseEndpoints

then wire in a Blazor Component into the page you need it

// index.html
// add into the page
// notice that <Counter> is linked via the filename Counter.razor
@(await Html.RenderComponentAsync<Counter>(RenderMode.ServerPrerendered))
<script src="_framework/blazor.server.js"></script>


Notice here that I’m using ServerPrerendered. This is used to prerender a site for SEO or even just to present a better experience for the user.

SQL-MisterMagoo gives an explanation:

  • Server = the index is sent to the client, then the SignalR connection is made, and when the connection becomes active, the components are rendered and sent to the client (the user sees and can interact with your components)

  • ServerPrerendered is for mainly, but not exclusively for SEO - the current layout is rendered server side and sent to the client in the initial Response - it is “Static” content - the user does not yet have a connection to the “Blazor” server - there is no SignalR connection yet, but there will be one soon. Once the connection is Active, the client is updated with a new render of the components which is interactive.jk


alt text

Source on bitbucket of my spikes into this technology and some notes here:

This is the canonical first example.

  • Press a button
  • No page refresh
  • update a UI element (One way binding from backing field to )
  • keep state

The component on the server, renders into an in-memory representation of that render tree that can be used to update the UI.


Comes from the example template in Blazor, but converted to not be a SPA but just a component on the page.

  • OnInitializedAsync

Any asynchronous operations, which require the component to re-render once they complete, should be placed in the OnInitializedAsync method.

A problem here is that the service is being called twice because of ServerPreRendering.

MS docs and to solve this. Contosocrafts has the same issue

Resources and People

Marco De Sanctis - Blazor MVVM and twitter

Blazored by Chris Saintly and twitter



Gitter Blazor channel

The Original talk by Steve Sandersen in Jul 2017 NDC

Balanced article and discussion by Scott Allen

Videos and Books

Component Libraries

Radzen - free



Blazer Server prerendering with parameters to components - will be back in 3.1
More dicussion of same issue here