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 on the server) 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 3 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 at the current time.
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 is also called a Standalone Blazor WebAssembly app.
Blazor Hybrid is used to create mobile and pc apps with Blazor. Microsoft already have .NET frameworks like MAUI, WPF, and Windows Forms for building mobile and pc apps. We can now use Blazor with these .NET frameworks to build pc and mobile apps, and such apps are known as Blazor Hybrid apps. In Blazor Hybrid, the Razor components run natively in the .NET framework and render web UI to an embedded Web View control. The Web View controls shows the output on the mobile and pc apps. Thus Blazor Hybrid helps us to bypass the learning of .NET frameworks like MAUI, WPF, etc and create native apps. Note that WebAssembly is not involved in Blazor Hybrid apps.
The Blazor Hybrid offers many benefits like:
You can start creating Blazor app in your PC by following the 2 steps:
1. Download & Install .NET – Click here to download.
2. Download & Install Visual Studio, 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 introduction 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.
Check our ASP.NET Core Blazor Series which will make you a complete Blazor Developer.