ASP.NET Core,Blazorのレイアウト

以前、Blazorの記事を書いたが、dotnet core 3.0が正式にリリースされたので、Blazorに関しても色々といじくり回している。

Blazor等ASP.NET Coreのアプリをテンプレートから作成すると、Navigationメニュー付きの画面になってしまうが、これを変更するには、デフォルトのテンプレートを編集するか、別のテンプレートを作成して、ページ内でレイアウトテンプレートを指定する。

テンプレートはASP.NET Coreの場合とBlazorの場合ではレイアウトファイル名やフォルダが異なる。

ASP.NET Coreアプリの場合
・場所
<プロジェクトルート>\Pages\Shared
・ファイル名
_Layout.cshtml

Blazorの場合
・場所
<プロジェクトルート>\Shared
・ファイル名
MainLayout.razor

これらのファイルを直接変更すると、ページソースを変更しなくてもレイアウトを変更できる。

ちなみに、ページ毎に別のレイアウトを作成したい場合は、上記のフォルダにレイアウトファイルを作成して、ページ記述(.cshtmlや.razor)中に@layoutで指定する事が可能。
例えば、ASP.NET Coreアプリで\Pages\Shared\MyLayout.cshtmlを作成して、それをページに適用したい場合は、ページ中に@Layout=”MyLayout”とすれば良い。

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。
カテゴリー: asp.net core, Blazor, C#, dotnetcore, 技術系 パーマリンク

1 Response to ASP.NET Core,Blazorのレイアウト

  1. すもも のコメント:

    ちなみに、cssはwwwroot\css\site.cssがサイト全体のCSS定義。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください