Zenn
💭

.NET 8 の Blazor Web App で MudBlazor を使う

2023/12/19に公開
.NET
C#
Blazor
ASP.NET Core
MudBlazor
tech

はじめに

  • .NET 7のBlazor Serverアプリを、.NET 8のBlazor Web Appに移行した際に、MudBlazorを調整した記録です。

MudBlazor とは

  • MudBlazorは、数あるBlazor用のUIフレームワークの一つです。
  • C#でコントロールしやすいように作られていて、.NETプログラマには使いやすいです。

https://mudblazor.com/

環境

  • Windows 11
    • VisualStudio 2022 17.10.3
    • .NET 8.0
    • MudBlazor 6.20.0, 7.0.0

プロジェクトの構成

  • VisualStudioで新規「Blazor Web App」プロジェクトを以下の想定で作ります。
    • フレームワークは.NET 8.0にします。
    • 認証の種類は「なし」にします。
    • 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で使うには、動的にレンダリングするように指定する必要があります。
    • 下記に「Currently only interactive rendering modes are supported」と書かれています。
  • MudBlazorのメジャーバージョンアップでは破壊的変更があります。
    • 既存のプロジェクトを移行する場合は、対応が必要になる可能性が高いです。

https://github.com/MudBlazor/MudBlazor/#prerequisities

https://learn.microsoft.com/ja-jp/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes

.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>

https://github.com/MudBlazor/MudBlazor/issues/7510#issuecomment-1814148288

  • 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のボディにスクリプトへの参照を加えます。
Pages/_Host.cshtml
+ <script src="_content/MudBlazor/MudBlazor.min.js"></script>
  • site.cssの中身を消去します。
  • wwwroot/css/からbootstrapとopen-iconicを削除します。
  • Pages/_Host.cshtmlのヘッダからbootstrapへの参照を除去します。
Pages/_Host.cshtml
- <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
  • Shared/MainLayout.razorにコンポーネントを導入します。
Shared/MainLayout.razor
+ <MudThemeProvider />
+ <MudDialogProvider />
+ <MudSnackbarProvider />
  • Program.csでサービスを登録します。
Program.cs
+ using MudBlazor.Services;
// ～
+ builder.Services.AddMudServices ();

https://mudblazor.com/getting-started/installation

おわりに

  • 最後までお読みいただきありがとうございました。
  • MudBlazorが.NET 8に完全対応すれば、不要になる情報のハズです。
  • お気づきの点があればコメントいただけると助かります。

応用編

  • 次の記事では、水平ナビゲーションバー、リスト (ソート、ページネーション、一括操作)、ダイアログ (閲覧と編集の切り替え、確認、プログレス)、スナックバー(トースト)などを使用してアプリを作ります。

https://zenn.dev/link/articles/6b1a70ca7800ed

Discussion