What is Blazor and what can you use it for?
Compiled .NET code in your browser
On May 19 of 2020 Microsoft officially released Blazor WebAssembly. Blazor enables you to run complicated .NET code in the browser you use. The entire .NET Standard Library is available to you and you don’t need a plugin, like you used to when using Silverlight.
Blazor is based on WebAssembly which supports all browsers, including iOs and Android browsers.
Initially, I thought the examples of Razor where HTML- and C#-code combined in one document looked very messy; click here to see what I mean. But in practice (unlike in the examples) HTML- and C#-code are divided into two separate documents, which Visual Studios keeps together. Once I put the program to practice, I was sold. The browser opens up an entire new world of possibilities.
Your HTML is built incredibly fast in your browser and you only have to communicate through your API with your ASP.NET Core server to exchange data. But the greatest benefit to Blazor is that you can write not only your code for your pages in C#.NET, but also your business logic, view(models) etc.
A world of possibilites
We are here to help
Don’t hesitate to contact us for more information or if you require assistance. We’d love to help! Whether you need us full time, or once in a while; we can provide a helping hand on your terms.
A technical description
Your pages and web components are .razor components. These components can be made up of a combination of HTML- and C#-code (where the C#-Code is in @code block), as is the case on this Blazor webpage.
But your C#-code could also be placed in a separate C# (partial) class, which Visual Studio can keep organised. Your C#-code for the Counter.razor page could then be found under Counter.razor.cs. I only use the @code block with very simple and straightforward components; for anything other than that I use partial classes.
It doesn’t take much effort to develop reusable Razor-components in which the HTML- and C#-code is combined. You can even use your C#-properties as parameters within your HTML-code, which is also possible in your CSS. If one or more parameters change, you use StateHasChanged(). This will lead Blazor to determine what exactly changed within the HTML and it will send only those changes to the render tree in the browser. This is a different approach from the one used with WPF/Xaml/Xamarin forms where modified properties relay through PropertyChanged that the view has to be updated. As a result, the properties in your Blazor view-code are much simpler.