第3回で拡張した機能について特徴的な構文を理解する
他のページ(Index、Detail、Edit、Delete)についても、特徴的な構文を紹介します。
Indexページ
まずはIndexページです。
// IListインタフェースによりリストになる
public IList<Footmark> Footmark { get;set; } (1)
--------------------------------------------------------------------------------
<!-- 表の見出し -->
@Html.DisplayNameFor(model => model.Footmark[0].YourName) (2)
<!-- ⇒「YourName」に展開される -->
…略…
<!-- 表の各値 -->
@foreach (var item in Model.Footmark) {
…略…
@Html.DisplayFor(modelItem => item.YourName) (3)
<!-- ⇒「やまうちなお」「03/11/2022 12:06:00」などに展開される -->
…略…
}
これらは、IndexページモデルにおけるFootmarkプロパティの宣言と、ビューにおけるHTMLヘルパーを用いたモデルデータの展開を表したコードです。Indexではすべてのモデルデータを表示するため、Footmarkプロパティもリストになります(1)。また、データバインドは参照のみで不要なので、[BindProperty]は付きません。
DisplayNameFor()はラベル、DisplayFor()は値を表示するためのビューヘルパーです(2)(3)。Footmarkプロパティはリストなのでインデックスでアクセス可能で、表の見出しは先頭要素の項目名を用い、表の各行はすべての要素の値としています。なお、DisplayFor()メソッドでは、上記のようにモデルのプロパティの型に応じて出力形式を切り替えるので、モデルの構造が変化してもビューへの影響を最小限にできます。
Detailページ
次は、Detailページです。
// 単一のモデルデータを保持する
public Footmark Footmark { get; set; }
--------------------------------------------------------------------------------
<!-- リストの見出し -->
@Html.DisplayNameFor(model => model.Footmark.YourName)
…略…
<!-- リストの各値 -->
@Html.DisplayFor(model => model.Footmark.YourName)
これらもFootmarkプロパティとモデルデータの展開ですが、Footmarkプロパティはリストではありません。詳細では、モデルデータは対象の単一のものであればいいからです。DisplayNameFor()メソッドとDisplayFor()メソッドの使われ方はIndexページと一緒です。
Editページ
さらに、Editページです。
// 単一のモデルデータをデータバインド付きで保持する
[BindProperty] (1)
public Footmark Footmark { get; set; }
// 編集ページを表示するためのメソッド
public async Task<IActionResult> OnGetAsync(int? id) (2)
…略…
Footmark = await _context.Footmark.FirstOrDefaultAsync(m => m.ID == id); (3)
…略…
--------------------------------------------------------------------------------
<!-- POSTメソッドで送信するフォーム -->
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<!-- 編集中のモデルデータを示すIDを保持 -->
<input type="hidden" asp-for="Footmark.ID" /> (4)
<div class="form-group">
…略…
EditページはCreateページに似ていますが、フォーム中に編集中のモデルデータを示すIDが隠しフィールドで保持されている点が異なります(4)。また、編集ページを表示するためのメソッドがOnGetAsync()として実装されています(2)。OnGetAsync()メソッドは、引数に与えられたIDを持つモデルデータを読み込み、Footmarkプロパティに設定します(3)。これにより、編集ページには対象モデルデータの値が表示されたものになります。また、このような処理を可能にするために、Footmarkプロパティにはデータバインドの指定[BindProperty]が付与されています(1)。
Deleteページ
最後に、Deleteページです。
// 単一のモデルデータをデータバインド付きで保持する
[BindProperty] (1)
public Footmark Footmark { get; set; }
// 削除ページを表示するためのメソッド
public async Task<IActionResult> OnGetAsync(int? id) (2)
…略…
Footmark = await _context.Footmark.FirstOrDefaultAsync(m => m.ID == id); (3)
--------------------------------------------------------------------------------
<!-- リストの見出し -->
@Html.DisplayNameFor(model => model.Footmark.YourName)
…略…
<!-- リストの各値 -->
@Html.DisplayFor(model => model.Footmark.YourName)
…略…
<form method="post">
<input type="hidden" asp-for="Footmark.ID" /> (4)
…略…
Deleteページは、DetailページとEditページが合わさったような形をしています。ページモデルについて[BindProperty]の指定があり(1)、フォーム中に削除対象のモデルデータを示すIDが隠しフィールドで保持されています(4)。削除ページを表示するためのメソッドがOnGetAsync()として実装されており(2)、引数に与えられたIDを持つモデルデータを読み込み、Footmarkプロパティに設定します(3)。これにより、削除ページには対象モデルの値が表示されたものになります。
まとめ
今回は、Razor Pagesのまとめとして、Scaffoldingによって作成されるCRUDページなどの解説を行いました。作成されるソースコードはシンプルでわかりやすいことがおわかりいただけたのではないかと思います。次回からは、同じくASP.NET CoreのサブフレームワークであるASP.NET MVC Coreを紹介します。
