With these three updates, you can create new or upgrade existing Blazor applications to the latest and greatest.
The following ASP.NET blog shows the steps necessary to upgrade your existing project, and also shows the changes that are getting close to the release naming conventions.
Notably the term Blazor is being phased out for the official branding of ASP.NET Components.
The Blazor Namespace is now Microsoft.AspNetCore.Components, rather than Microsoft.AspNetCore.Blazor
BlazorComponent is now called ComponentBase.
BlazorLayoutComponent is now just LayoutComponentBase
The simple JSON parser has been replaced by Newtonsoft’s parser, a welcome addition for those of us that need the advanced features of that parser. It was previously possible to use the Newtonsoft parser, but you needed to disable IL linking, which resulted in a much larger package size.
Visual Studio 2019 now has tooling by default.
.NET 3.0 support. Previously Blazor was limited to .NET core 2.1 (not even 2.2). With this upgrade, Blazor runs nicely in 3.0, with a performance boost.
Finally there is some client/browser side debugging. This should make for far better development experience.
That is all it takes. Any items that were injected using the @inject keyword, can be injected to the class by making a property and using the [Inject] attribute.
I like this separation a lot better than the code existing the cshtml. However, in some simple pages, code directly in the cshtml will be very powerful. So, I can see a use for both.
You may or may not have heard of WebAssembly, or the Mono Framework, but Microsoft is blending them to wonderful platform goodness, for the future of the web. So, you may never need to understand either to take full advantage.
Keep in mind these are all experimental bits, at the moment. You can learn more at Blazor.net
WebAssembly (Wasm) is a part of all major modern browsers. It is a binary format for execution in a browser’s controlled sand-box. It is meant to be an intermediate format and not written directly, but it can be. In general you compile from a high level language to Wasm. It serves a similar purpose to JavaScript, but is not intended to be a replacement for JavaScript. In my opinion will take a large bite out of JavaScript’s stranglehold on client code; especially with Microsoft’s help.
The Mono framework was started in 2004. The .NET framework and compilers were Windows only. The Mono open-source project implemented the .NET APIs, based on the same ECMA-335 open standard, that was implemented in the official .NET. This allowed compiling and running .NET code on non-Windows systems, such as Linux and MacOS.
Blazor is an experimental Single-page application (SPA) framework that combines C#, WebAssembly, and Mono to allow C# code to be compiled and run directly in the browser. The Mono framework is provided as WebAssembly. For now, at least, the browser will use Mono to interpret the client .NET dll’s; but the speculation is that the compiler will eventually minify and cross-compile the .NET dll’s directly to WebAssembly.
Blazor has a deployment mode that is coded in mostly the same way, but runs server-side. The Blazor code runs on the server, and only the view differences are sent to the browser, via a SignalR connection. This mode gives the same coding benefits, but since the Blazor client code runs on the server, delays between the browser and server can be seen. It also requires more server compute power. This deployment mode is scheduled to be released in .NET Core 3.0.
For a Blazor coding experiment we will use the client side mode, with some WebApi to get configuration data. I made a simple dashboard with widgets that are loaded via server configuration. The project is based on the Hosted Blazor template.
Widgets can be any Blazor component, but I kept my widgets all cards to keep a consistent look.
There is a simple widget that just takes it content as parameters
There is a countdown widget, that can either countdown to a date, or count from one date to another with progress
There is a life countdown, to tell you how many more days you have to an age
And for fun there is a bouncing ball demo on a canvas
This is a simple demo, so the Blazor widgets are compiled directly into the client app, using pages. The index page will request an array of WidgetSettings from the server’s WebApi
Another important part of the MVVM (Model-View-ViewModel) pattern is the allowing the View to request actions in the ViewModel. We will achieve this with the ICommand Interface.
You can implement many single-purpose classes that implement ICommand, but as a good friend once told me, if you want to find the easy way to do something, ask a lazy person to do it twice.
I like to create a SimpleCommand that implements ICommand, and accepts an Action in the constructor.
With this SimpleCommand, the CanExecute state is manually set via the setCanExecute method, but you can easily pass a predicate in the constructor to validate CanExecute as well. Keep in mind, this value should be very inexpensive or better yet cached, as some MVVM frameworks will exhaustively call the CanExecute method to see if the Command has changed states.
You can also extend the constructor to accept a default state for CanExecute, if that is desirable.
Most of the UI elements you are used to using, with Events, will have Dependency Properties that accept commands to be used in-place of the events.
For instance a button has a Command property that can replace the click event.
Bind to the Command. If you need to pass a parameter you can pass that in the Command’s associated Parameter property; or for advanced data bind to the Parameter. The button will be enabled or disabled based on the CanExecute state of the Command.
Pressing the Say ‘Button Pressed’ Button, which is connected to our command, will execute the command. The command will update the message, with the message passed through the parameter.
OnPropertyChanged() will either allow for a property to announce that it has changed
publicstring MyProperty
{
get { return _myProperty; }
set
{
_myProperty =value;
OnPropertyChanged();
}
}
..or that another property has changed, by passing the name of that property.
publicstring LastName
{
set
{
...
OnPropertyChanged(nameof(FullName));
}
}
setBackingField<T>() is a helper method to allow property setters to perform all of the aspect necessary for setting their backing field and calling OnPropertyChanged to reflect that change.
publicstring MyProperty
{
get { return _myProperty; }
set
{
setBackingField(ref _myProperty, value);
}
}
setBackingField<T>() will return a boolean informing if there was change.
ViewModels will inherit this and take advantage of the helper methods
Welcome to my blog experiment. I have been a software developer for over 20 years, developing C, C++, VB, ASP, PHP. In the past 14 years I have focused on .NET for desktop.
The world is growing rapidly around me. This blog will encourage me to grow my abilities, and if it helps someone else along the way, we both benefit