SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

.NET最新版でASP.NET Core

.NET 6でASP.NET CoreのRazor PagesによるMVVMパターンを理解する

.NET最新版でASP.NET Core 第4回


第3回で拡張した機能について特徴的な構文を理解する

 他のページ(Index、Detail、Edit、Delete)についても、特徴的な構文を紹介します。

Indexページ

 まずはIndexページです。

リスト8:Indexページ(上:Pages/Footmarks/Index.cshtml/下:Pages/Footmarks/Index.cshtml.cs)
// 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ページです。

リスト9:Detailページ(上:Pages/Footmarks/Detail.cshtml/下:Pages/Footmarks/Detail.cshtml.cs)
// 単一のモデルデータを保持する
public Footmark Footmark { get; set; }
--------------------------------------------------------------------------------
<!-- リストの見出し -->
@Html.DisplayNameFor(model => model.Footmark.YourName)
…略…
<!-- リストの各値 -->
@Html.DisplayFor(model => model.Footmark.YourName)

 これらもFootmarkプロパティとモデルデータの展開ですが、Footmarkプロパティはリストではありません。詳細では、モデルデータは対象の単一のものであればいいからです。DisplayNameFor()メソッドとDisplayFor()メソッドの使われ方はIndexページと一緒です。

Editページ

 さらに、Editページです。

リスト10:editページ(上:Pages/Footmarks/Edit.cshtml/下:Pages/Footmarks/Edit.cshtml.cs)
// 単一のモデルデータをデータバインド付きで保持する
[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ページです。

リスト11:Deleteページ(上:Pages/Footmarks/Delete.cshtml/下:Pages/Footmarks/Delete.cshtml.cs)
// 単一のモデルデータをデータバインド付きで保持する
[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を紹介します。

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
.NET最新版でASP.NET Core連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/15940 2023/05/26 17:17

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー