.NET8 Blazor Identity WebApp では対話型的なコンポーネントをMainLayout.razorに追加
Radzen レイアウトコンポーネントを Blazor WebApp のメイン レイアウトに追加したかったが、ヘッダーには対話型コンポーネントであるユーザー メニューが含まれていたため、MainLayout.razorのレンダー モードを対話型にする必要がありました。
第１問題
- 最初の問題は、
@rendermode InteractiveServerディレクティブを単に Blazor レイアウトに追加することはできず、以下のようにComponents\App.razorファイル内の<HeadOutlet />タグと<Routes />タグに属性として追加する必要があることです：<HeadOutlet rendermode="InteractiveServer" /> </head> <body> <Routes rendermode="InteractiveServer" />
第２問題
- 次の問題は、アプリケーションを起動すると、ログイン ページのレンダリングが何度もループすることでした。
- 解決策は、認証ルートを除くすべてのルートにグローバル「InteractiveServer」レンダリング モードを条件付きで設定するコードを追加することでした：
<HeadOutlet @rendermode="RenderModeForPage" /> </head> <body> <Routes @rendermode="RenderModeForPage" /> <script src="_framework/blazor.web.js"></script> <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> </body> </html> @code { [CascadingParameter] private HttpContext HttpContext { get; set; } = default!; private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account") ? null : InteractiveServer; }
メインレイアウト
-
Components\Layout\MainLayout.razorファイルに<RadzenComponents />などを移します：@inherits LayoutComponentBase @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Sections @using Microsoft.AspNetCore.Identity @using System.Diagnostics @using System.Security.Claims @inject AuthenticationStateProvider GetAuthenticationStateAsync @inject NavigationManager NavigationManager @inject IJSRuntime JsRuntime <RadzenComponents /> <RadzenLayout> // ...