スポンサーリンク
スポンサーリンク

Blazor Server で使える、使い勝手の良い MessageBox

.NET CoreASP.NET CoreBlazor Server 5.0C#Visual Studio 2019

最新記事=> Blazor Server 使い勝手の良い MessageBox v2

Windows Form アプリの MessageBox と同等の使い勝手で、使い勝手の良い MessageBox を Blazor Server でも実現したので使ってほしい。
ソースコードはGitHubで公開しています。

ソースコード構成

ソースコード変更内容を解説

WebApplication1.csproj

・Blazored.Modal nugetパッケージを追加。

_Imports.razor

・Blazored.Modal、Blazored.Modal.Services の usingを追加。

App.razor

・<CascadingBlazoredModal>を追加。一番外側に追加すればどこからでも使える。

Pages/_Host.cshtml

・Blazored.Modal nugetパッケージに組み込まれている、blazored-modal.css blazored.modal.js を追加。

Startup.cs

・Blazored.Modal の using と、services.AddBlazoredModal() を追加。

Shared/NavMenu.razor

・MessageBoxSample 画面へのリンクを追加。

MessageBoxの左側に表示しているフリー素材のアイコンを追加

wwwroot/img/MessageIcon/Error.jpg
wwwroot/img/MessageIcon/Information.jpg
wwwroot/img/MessageIcon/Question.jpg
wwwroot/img/MessageIcon/Warning.jpg

enumを追加

Const/enums/MessageBoxButtons.cs
Const/enums/MessageBoxIcon.cs

Modal/ModalMessageBox.razor

・ MessageBox の画面本体。

Modal/ModalMessageBox.razor.css

・MessageBox 画面のcss。

Common/MessageBox.cs

・アプリ全体から MessageBox 画面を表示するための処理。

Pages/MessageBoxSample.razor

・MessageBox を使っているサンプル画面。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

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