🐦

ASP.NET Razor Pages を最初から(5)

2023/02/14に公開

はじめに

Webページの共通レイアウトの使い方が分かったので、次は部分ビューの使用方法を確認していく。
実際のWebページ作成だとヘッダー、メニュー、フッターなど分割して作っていた記憶があるが今も主流なのだろうか?
なんにせよ、部分ビューは非常に便利な機能なのでしっかり使い方を覚えておきたい。

ASP.NET Razor Pagesの部分ビュー機能

ASP.NET Razor Pagesの部分的なビュー機能は、Partial Viewとして、オフィシャルマニュアルではASP.NET MVCの箇所に記載がある。
ちゃんとRazor Pages の PageModel で部分ビューを使用するとカテゴリも作ってくれているが、Razor Pagesのところい書いてほしい。
https://learn.microsoft.com/ja-jp/aspnet/core/mvc/views/partial?view=aspnetcore-7.0#use-a-partial-view-in-a-razor-pages-pagemodel

ここでは、利用方法として2つ説明されている。

  1. Razor Pages の PageModel で部分ビューを使用する
  2. マークアップ ファイルで部分ビューを使用する

PageModelで使用する方法がよくわからなかったので、マークアップファイルで使用する方法を確認する。
通常使用する場合こちらの使い方がメインになると思う。

部分ビューを作成する

部分ビューは、下記の順番で検索される。

  1. 現在実行中のページのフォルダー
  2. ページのフォルダーの上にあるディレクトリ グラフ
  3. /Shared
  4. /Pages/Shared
  5. /Views/Shared

Sharedの中に置いておきたいが混ざると管理しにくいので、Shared/Partialフォルダを作ってその中に作成していく。
新しい項目の追加
Razorビュー - 空のテンプレートを選択して、名前は_HogePartial.cshtmlにしておく。
特にPartialと付ける規則はないけどわかりやすいように付けておく。
先頭に_を付けるのは必須ではないがMicrosoftの慣習ぽいので付けておく事にする。

作成したファイルにタグを追加する。

Pages/Shared/Partial/_HogePartial.cshtml
@{}
<div>
    <p>Hoge Partial</p>
</div>

これで簡単だが部分ビューはできた。

部分ビューを他のビューで読み込む

部分ビューを読み込むには、部分タグヘルパー非同期のHTMLヘルパーを使用する方法が用意されている。
ここでは、Hoge.cshtml内に先ほど作成した_HogePartial.cshtmlを読み込んでみる。

部分タグヘルパー

部分タグヘルパーを使用して読み込む。

Hoge.cshtml
<div>
    <h1>Hoge見出し</h1>
</div>
<partial name="_HogePartial" />

nameに部分ビューファイルを指定する。
絶対パスでも拡張子有りでも可能。
これで実行する。
Error
Errorが出た。
_HogePartialが見つからないようだ。
Sharedの下は探しているが、サブフォルダは検索対象にならないようだ。
サブフォルダをパスに含めてもう一度実行する。
<partial name="Partial/_HogePartial" />
HogePAatial
ちゃんと読み込む事ができた。

非同期HTMLヘルパー

非同期のHTMLヘルパーを使用して読み込む。

Hoge.cshtml
<div>
    <h1>Hoge見出し</h1>
</div>
<partial name="Partial/_HogePartial" />
@await Html.PartialAsync("Partial/_HogePartial")

実行。
非同期HTMLヘルパー
特に問題もなく成功。

RazorPagesは非常に簡単にビューをパーツ化出来る事が確認できた。
次は、部分ビューにデータを渡す事ができると便利なので
部分ビューにデータを渡して利用する方法を確認していく。

https://zenn.dev/akilab/articles/e4d5f3d5c8e4b8

Discussion