💭
.NET 8/10 の Blazor Web App で MudBlazor を使う
はじめに
- .NET 7のBlazor Serverアプリを、.NET 8のBlazor Web Appに移行した際に、MudBlazorを調整した記録です。
- .NET 10に対応しました。必要に応じて以下も参照してください。
MudBlazor とは
- MudBlazorは、数あるBlazor用のUIフレームワークの一つです。
- C#でコントロールしやすいように作られていて、.NETプログラマには使いやすいです。
環境
- Windows 11
- VisualStudio 2022, 2026
- .NET 7.0, 8.0, 10.0
- MudBlazor 8.14.0
プロジェクトの構成
- VisualStudioで新規「Blazor Web App」プロジェクトを以下の想定で作ります。
- 認証の種類は「なし」にします。
- HTTPS用の構成にします。
-
Interactive render modeはAuto(Server and WebAssembly)(自動)またはServerまたはInteractive WebAssembly(サーバー)にします。 -
Interactivity locationはPer page/componentにします。
NuGet パッケージの導入
- パッケージマネージャコンソール、または、管理タブで、NuGetパッケージ
MudBlazorを導入します。
MudBlazor の構成
-
.NET 8では、構成ファイルに変化がありますが、ファイル内容を一通り見れば解る程度の違いです。 -
MudBlazorを.NET 8以降で使うには、動的にレンダリングするように指定する必要があります。- 下記に「Static rendering is not supported.」と書かれています。
-
MudBlazorのメジャーバージョンアップでは破壊的変更があります。- 既存のプロジェクトを移行する場合は、対応が必要になる可能性が高いです。
.NET 10 での構成
-
App.razorで@Assets["~"]を使う以外ば、.NET 8と同じです。
Components/App.razor
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="@Assets["_content/MudBlazor/MudBlazor.min.css"]" rel="stylesheet" />
Components/App.razor
<script src="@Assets["_content/MudBlazor/MudBlazor.min.js"]"></script>
.NET 8 での構成
-
Components/_Imports.razorに名前空間を加えます。
Components/_Imports.razor
+ @using MudBlazor
-
wwwroot/に対して、以下を実施します。-
app.cssの中身を消去します。 - フォルダ
bootstrapを削除します。
-
-
Components/App.razorに対して、以下を実施します。- ヘッダにフォントとスタイルシートへの参照を加えます。
- ヘッダから、
bootstrapへの参照を除去します。 - ボディにスクリプトへの参照を加えます。
-
<Routes />にサーバ側レンダリングモードの指定を加えます。- プロジェクトの
Interactive render modeをServerに設定した場合は不要です。
- プロジェクトの
Components/App.razor
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
- <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+ <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<HeadOutlet />
</head>
<body>
- <Routes />
+ <Routes @rendermode="@RenderMode.InteractiveServer" />
<script src="_framework/blazor.web.js"></script>
+ <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
-
Components/Layout/MainLayout.razorの最後でコンポーネントを導入します。
Components/Layout/MainLayout.razor
+ <MudThemeProvider />
+ <MudPopoverProvider/>
+ <MudDialogProvider />
+ <MudSnackbarProvider />
-
Program.csでサービスを登録します。
Program.cs
+ using MudBlazor.Services;
// ~ ~ ~
+ builder.Services.AddMudServices ();
.NET 7 での構成
-
_Imports.razorに名前空間を加えます。
_Imports.razor
+ @using MudBlazor
-
Pages/_Host.cshtmlのヘッダにフォントとスタイルシートへの参照を加えます。
Pages/_Host.cshtml
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
+ <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
-
Pages/_Host.cshtmlのボディにスクリプトへの参照を加えます。
Components/Pages/_Host.cshtml
+ <script src="_content/MudBlazor/MudBlazor.min.js"></script>
-
site.cssの中身を消去します。 -
wwwroot/css/からbootstrapとopen-iconicを削除します。 -
Pages/_Host.cshtmlのヘッダからbootstrapへの参照を除去します。
Components/Pages/_Host.cshtml
- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-
Components/Layout/MainLayout.razor(、または、Components/Routes.razor)にコンポーネントを導入します。
Components/Layout/MainLayout.razor
+ <MudThemeProvider />
+ <MudPopoverProvider />
+ <MudDialogProvider />
+ <MudSnackbarProvider />
-
Program.csでサービスを登録します。
Program.cs
+ using MudBlazor.Services;
// ～
+ builder.Services.AddMudServices ();
おわりに
- 最後までお読みいただきありがとうございました。
- 基本的に、公式READMEの通りに導入すれば大丈夫です。
- お気づきの点があればコメントいただけると助かります。
応用編
- 次の記事では、水平ナビゲーションバー、リスト (ソート、ページネーション、一括操作)、ダイアログ (閲覧と編集の切り替え、確認、プログレス)、スナックバー(トースト)などを使用してアプリを作ります。
Discussion