スポンサーリンク

The simplest implementation of asynchronous processing in Blazor Server

.NET CoreASP.NET CoreBlazor Server 5.0C#Visual Studio 2019ウェブ・技術開発方式

I’ve created a sample of the simplest asynchronous processing that can be achieved with Blazor Server, and I’d like you to refer to it. The source code is now available on GitHub.

* The essence of high productivity of Blazor Server is that you can easily implement this creation without writing JavaScript.

Source Code Structure

I just added LoadingOverlay.razor LoadingOverlay.razor.css to the Blazor Server template in the Visual Studio project and modified Counter.razor a bit.

Explanation of source code changes

LoadingOverlay.razor

・Parts of the “Processing…” screen.
・Visible parameter variable to show/hide the “Processing…” screen with if (Visible).

LoadingOverlay.razor.css

・CSS dedicated to the “Processing…” screen part.
・z-index: 999991″ displays the “Processing…” screen part at the front.
・By displaying the “Processing…” screen part, which covers the entire screen, at the top of the screen, you can prevent the user from hitting the button repeatedly while the process is running, or from starting another process before the process is finished.

Counter.razor

・Sample screen using the “Processing…” screen part.
・JsRuntime.InvokeAsync() is used to implement the confirmation message/completion message as a general movement with JavaScript confirm/alert.
・The “Processing…” screen part is embedded with , and the IsLoadingOverlay variable is used to show/hide the “Processing…” screen.
・Changes in the IsLoadingOverlay variable are reflected to the browser by executing StateHasChanged().
・When the button is clicked, all the processing in the IncrementCount() event handler is implemented synchronously, but by displaying the “Processing…” screen in the front until the processing is completed, the movement seen by the user is asynchronous.
・(Important) The ability to implement all processing in an event handler asynchronously without turning it into a service means that the source code implementation becomes very simple.
 The ability to implement synchronously means that all business logic can be implemented in static classes to improve performance. Data is passed to each static method in the instance class.
・The names of variables and methods in Blazor Server can be localized, such as the ビジネスロジック() method. I always think that Japanese people can make many things go more smoothly if they write their programs using a lot of Japanese.

StateHasChanged() 補足

In the early days of .Net Core 5.0, there was a case that variable changes were not reflected in the browser when StateHasChanged() was executed. This was resolved by adding an await Task.Delay(1) to create a timing for the thread to switch.
Blazor Server の画面で処理中オーバーレイを表示する

How does Blazor Server work?

_Host.cshtml

・_framework/blazor.server.js is embedded in _Host.cshtml, and blazor.server.js is the main body of the front side of Blazor Server.
・blazor.server.js retrieves the DOM from the web server at a frequency of milliseconds, and if there is any change in the DOM, it is reflected in the HTML on the browser side, and the screen displayed on the browser changes in real time.
・The DOM on the web server side will change when StateHasChanged() is executed.
・The DOM on the web server side will be changed by executing StateHasChanged(). ・ StateHasChanged() will be executed automatically after the event handler execution is finished, so it will look like the event handler execution result is reflected in the browser.

Visual Studio Project

The Visual Studio project template we used is Blazor Server 5.0 without authentication and without HTTPS.

コメント

タイトルとURLをコピーしました