As a .NET Developer, I have always wanted to have the ability to write C# on the client-side. Now, with the addition of Blazor to Microsoft’s ever-growing tech-stack, I can do just that.
What exactly is Blazor?
Blazor is an HTML framework in the same vein as Angular, React, and Vue. It’s used for rendering .NET on the client side and runs under WebAssembly. It offers all the benefits of a modern front-end framework while working entirely in C#.
Benefits of Using Blazor
- Runs in a memory safe sandboxed environment and nearly faster as native applications.
- All the necessary SPA features are supported by Blazor such as components, routing, dependency injection for an up to date developer experience.
- Blazor applications can be deployed on machines having no .NET, just as static files.
- Rich IntelliSense and tooling for lesser development time.
- Supported by all mainstream browsers(Chrome, Edge, Firefox, Opera, Safari) including the ability to run on older (non-WebAssembly) ones via asm.js.
Why Does WebAssembly Matter?
Let’s take a look at some of what the Blazor templates have to offer. To start, install the following:
- .NET Core 2.1 SDK (2.1.500 or later).
- Visual Studio 2017 (15.9 or later) with the ASP.NET and web development workload selected.
- The latest Blazor Language Services extension from the Visual Studio Marketplace.
- The Blazor templates on the command-line:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
In our Pages/Index.cshtml, the Blazor client-side router uses route parameters to populate the corresponding component parameters with the same name.
The @page directive in the first line represents the routing and is mapped to the home index root. Then the next 2 lines are just normal HTML markups. The last line may look different from what you’re used to seeing. This is called a component in Blazor. Note that the component name is the same as the component page name.
Moving on, to our Shared/SurveryPromt.cshtml
The Blazor function at the end of the component makes it possible to pass a value from the parent, Index page in this case to the component with the help of [Parameter] annotation.
Also like we said Blazor supports dependency injection as demonstrated in our Pages/FetchData.cshtml working with http requests you can inject HttpClient into a certain page for handling requests.
Blazor’s learning curve is smooth and easy. It has all the must-have features of a modern day SPA-Framework at your disposal while still keeping things simple. Regardless, Blazor is still in its alpha stage so it’s expected that some of the features are either lacking functionality or are in development.