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

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

.NET CoreASP.NET CoreBlazor ServerC#SPAVisual Studio

最新記事=> 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をコピーしました