In contrast to Blazor Server, the WebAssembly variant of ASP.NET Core Blazor executes the C # program code in the web browser as a true single-page web application. In contrast to the Blazor server variant, a Blazor WebAssembly can also work offline – it only needs to contact the server to load and persist data. Figure 1 shows the comparison of the two architectures. Details on the architectural differences were given in the article “Alternatives to JavaScript?”.

Part 1: Web API Calls and Data Rendering Part 2: Input controls and JavaScript interoperability Part 3: Authentication and authorization Part 4: State management and reloading of modules Part 5: Bidirectional communication and notifications Architecture alternatives: Comparison of Blazor Server with Blazor Webassembly (Fig. 1)

(Image: Holger Schwichtenberg)

Requirements The first version of Blazor WebAssembly is under version number 3.2 on 19. May 2020 published. The tutorial already covers the improved successor, version number 5.0. The following software is required for this:

. NET 5.0 Software Development Kit (SDK), at least version “Release Candidate 2” (after installation for checking on the command line dotnet –version (enter . Visual Studio 2019, at least version 16.8th. The tutorial is based on Release Candidate 2 of .NET 5.0. Even if Microsoft has issued a “go-live” license for productive use for this, it is possible that APIs will still change and that the program code shown here with subsequent versions will not run without modifications.

While the .NET 5.0 SDK is permanently free of charge, only the preview versions of Visual Studio are completely free of charge. Of the stable version, only the community version is free. This is technically sufficient for the tutorial articles, but is subject to legal restrictions. The creation of open source applications as well as the use for online or face-to-face training or for academic research purposes are also permitted in larger companies. The tutorial could be understood as “research”. If you do not want to install preview versions, you can also use the stable version 16. 7 using Visual Studio with .NET Core 3.1 SDK. The tutorial will point out a few functions that are then not available. In terms of content, it assumes that developers are familiar with .NET Core, C #, Web APIs or REST services, HTML, CSS and JavaScript.

betterCode () presents: .NET 5.0 – The online event on December 3rd 2020 You can learn that:

From .NET Framework via .NET Core to .NET 5.0: What does this mean for the migration, and how big is the effort? What’s new in .NET 5.0? New features: Get to know ASP.NET Core 5.0 and Blazor 5.0 The most important language innovations in C # 9 Mobile development with .NET 5 OR mapping with Entity Framework Core 5.0 WinUI 3 as an alternative to WPF and UWP Outlook on .NET 6.0 Case study “MiracleList” As part of a three-part iX – tutorials (see , [2] and is 2017 the single-page web application “MiracleList” for task management with TypeScript, Angular and Twitter Bootstrap as well as various freely available controls was created. “MiracleList” is based on the web application and app “WunderList”, which the company Microsoft 2015 for over 100 Bought million dollars and then 2020 in favor of “Microsoft ToDo” buried.

This tutorial will now reprogram the same web application with ASP.NET Core Blazor WebAssembly. The result is shown in Figure 2, which can be viewed live on the Internet. Readers can find the source code (initial status, intermediate status and final status in branches) on GitHub.

MiracleList has task categories (see left in Fig. 2), a list of tasks in each category (middle) and a task processing area on the right, which is only displayed on a case-by-case basis.

MiracleList with Blazor WebAssembly (Fig. 2)

The tutorial will access the backend available in the cloud. In order to be able to use this, users have to apply for a “Client ID” there.

Microsoft supplies a project template in the .NET SDK for Blazor Server and Blazor WebAssembly with. These templates can be accessed via the command line ( dotnet new ) or use Visual Studio. The tutorial should not start with this project template, but with a specially created one that readers can download from GitHub. The advantage is that the necessary design elements (CSS, graphics) are already included and all unnecessary examples are removed from the standard project template. Otherwise there would be many individual, error-prone steps.

Users open the file MiracleList.sln via File | Open | Project / Solution in Visual Studio and then see a “MiracleList” project folder with three projects in the Solution Explorer (see Fig. 3 on the right):

“MiracleListBW” (Target Framework: .NET 5.0): the Blazor WebAssembly-based frontend ” MiracleListAPI_Proxy “(.NET Standard 2.0): Proxy classes for the MiracleList backend, generated from the Open API Specification (OAS) with NSwagStudio. “BO” (.NET Standard 2.0): common business objects that are used in the backend and in the frontend Who is not .NET 5.0, but the old Blazor WebAssembly 3.2 use, the project file MiracleListBW 32. csproj instead of MiracleListBW.csproj in the project folder.

Now it is recommended to use the application for Test to translate ( Build / Build Solution ) and then to start, either with Debug / Start Debugging [/cpas] (F5 key) or [caps] View in browser in the context menu of the project. If everything works correctly on the PC, you can see the web application with two menu items (Fig. 3).

Starting point for the tutorial (Fig. 3)

It should be noted that WebAssembly is generally only implemented in modern web browsers – i.e. not in Internet Explorer. For software developers, debugging from Visual Studio currently requires a Chromium-based web browser, i.e. the latest generation of Google Chrome or Microsoft Edge. Developers select the browser for debugging in the menu shown in Figure 4 in the Visual Studio toolbar.

Choice of the web browser to start debugging (Fig. 4)

The template project supplied is structured as follows:

There is a folder wwwroot with CSS and graphic files (including Bootstrap u