ASP.NET Razor Pages を最初から(5)
はじめに
Webページの共通レイアウトの使い方が分かったので、次は部分ビューの使用方法を確認していく。
実際のWebページ作成だとヘッダー、メニュー、フッターなど分割して作っていた記憶があるが今も主流なのだろうか？
なんにせよ、部分ビューは非常に便利な機能なのでしっかり使い方を覚えておきたい。
ASP.NET Razor Pagesの部分ビュー機能
ASP.NET Razor Pagesの部分的なビュー機能は、Partial Viewとして、オフィシャルマニュアルではASP.NET MVCの箇所に記載がある。
ちゃんとRazor Pages の PageModel で部分ビューを使用するとカテゴリも作ってくれているが、Razor Pagesのところい書いてほしい。
ここでは、利用方法として2つ説明されている。
- Razor Pages の PageModel で部分ビューを使用する
- マークアップ ファイルで部分ビューを使用する
PageModelで使用する方法がよくわからなかったので、マークアップファイルで使用する方法を確認する。
通常使用する場合こちらの使い方がメインになると思う。
部分ビューを作成する
部分ビューは、下記の順番で検索される。
- 現在実行中のページのフォルダー
- ページのフォルダーの上にあるディレクトリ グラフ
- /Shared
- /Pages/Shared
- /Views/Shared
Sharedの中に置いておきたいが混ざると管理しにくいので、Shared/Partialフォルダを作ってその中に作成していく。
Razorビュー - 空のテンプレートを選択して、名前は_HogePartial.cshtmlにしておく。
特にPartialと付ける規則はないけどわかりやすいように付けておく。
先頭に_を付けるのは必須ではないがMicrosoftの慣習ぽいので付けておく事にする。
作成したファイルにタグを追加する。
@{}
<div>
<p>Hoge Partial</p>
</div>
これで簡単だが部分ビューはできた。
部分ビューを他のビューで読み込む
部分ビューを読み込むには、部分タグヘルパーと非同期のHTMLヘルパーを使用する方法が用意されている。
ここでは、Hoge.cshtml内に先ほど作成した_HogePartial.cshtmlを読み込んでみる。
部分タグヘルパー
部分タグヘルパーを使用して読み込む。
<div>
<h1>Hoge見出し</h1>
</div>
<partial name="_HogePartial" />
nameに部分ビューファイルを指定する。
絶対パスでも拡張子有りでも可能。
これで実行する。
Errorが出た。
_HogePartialが見つからないようだ。
Sharedの下は探しているが、サブフォルダは検索対象にならないようだ。
サブフォルダをパスに含めてもう一度実行する。
<partial name="Partial/_HogePartial" />
ちゃんと読み込む事ができた。
非同期HTMLヘルパー
非同期のHTMLヘルパーを使用して読み込む。
<div>
<h1>Hoge見出し</h1>
</div>
<partial name="Partial/_HogePartial" />
@await Html.PartialAsync("Partial/_HogePartial")
実行。
特に問題もなく成功。
RazorPagesは非常に簡単にビューをパーツ化出来る事が確認できた。
次は、部分ビューにデータを渡す事ができると便利なので
部分ビューにデータを渡して利用する方法を確認していく。
Discussion