Blazor maintains a “Persistent” HTTP connection between the Client (i.e. Browser) and the Server using SignalR. When an event, such as a button click, is performed by the client then this information about the event is sent to the server over the SignalR connection.
The server in turn handles the event and sends back the updated HTML (which is based on what the event performed) to the client. The updated HTML is not the entire page HTML but only a small part and hence the response is much faster. The browser, on receiving the response, updates the user interface (UI).
Blazor has 2 hosting models which are :
In Blazor Server hosting model, your Blazor app is executed on the server from within an ASP.NET Core app. Here SignalR establish and maintains a Persistent HTTP connection between the Client (i.e. Browser) and the ASP.NET Core Server. The blazor.server.js script establishes the SignalR connection with the server. In most of the times you will be using the Blazor Server hosting model because in Blazor WebAssembly the .NET runtime and tooling support is less mature.
Here the Blazor application runs in the browser on WebAssembly. So, everything the app needs like dependencies, .NET runtime, etc are downloaded to the browser (so the app takes longer to reload). The app’s assets are deployed as static files to a web server for serving static content to clients. Here the Blazor app is deployed without a backend ASP.NET Core app so it’s also called a Standalone Blazor WebAssembly app.
You can start creating Blazor app in your PC by following the 2 steps:
1. Download & Install .NET 5 – Click here to download.
2. Download & Install Visual Studio 2019 or Visual Studio Code or Visual Studio for Mac. – Click here to download
You can start learning Blazor and should have a basic understanding of C# & HTML. You can get this in just a day’s time.
In your Blazor app create a new Razor Component called “Hello.razor” with the following code as shown below:
Notice that there are 3 html controls:
After running the app, you have to enter your name and select your city and press the button. On clicking the button, you will see a hello message like – Hello Sam from Boston.
See the below short video which shows the working:
Note that all this happens instantly without any page reload. This is the power of Blazor.
This induction to Blazor covers how Blazor works and what are it’s advantages and disadvantages. I also created a small Hello World program in Blazor. In the next tutorials I will cover different areas of Blazor.