血糖値管理プログラムを、Web版にするにあたり、Razor Pages モデルで開発します。
今回は Razor Pages モデル について、理解したことを記載します。
Razor Pages モデル は、ビューを担当する Razorページ と リクエストの受付処理 や ロジック関係の処理を担当する PageModelクラス がメインの役者です。
まず、Razorページ と PageModelクラス について記載します。
つづいて、Razorページ と PageModelクラス は、 プロジェクトフォルダの下のPagesフォルダ内に作られるのですが、このファイルとブラウザから指定するURLとの関係を記します。
最後に Razor Pagesモデル の Program.csファイル の内容について記載します。
なお、バインドという機能も重要なのですが、これについては別途掲載したいと思います。
百聞は一見に如かず です。
まずは、Razor ページ について見ていきます。
Razor ページ は、拡張子”.cshtml”がついたファイルです。
サンプルとして index.cshtml という Razor ページ の中味を見てみましょう。
一見するとHTMLファイルのようですが、このファイルに タグヘルパー というものを埋め込んでいます。
赤の部分がタグヘルパーです。
| @page @model RazorPagesContacts.Pages.Customers.IndexModel @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <h1>Contacts home page</h1> <form method=”post”> <table class=”table”> <thead> <tr> <th>ID</th> <th>Name</th> <th></th> </tr> </thead> <tbody> @if (Model.Customers != null) { foreach (var contact in Model.Customers) { <tr> <td> @contact.Id </td> <td>@contact.Name</td> <td> <!– <snippet_Edit> –> <a asp-page=”./Edit” asp-route-id=”@contact.Id“>Edit</a> | <!– </snippet_Edit> –> <!– <snippet_Delete> –> <button type=”submit” asp-page-handler=”delete” asp-route-id=”@contact.Id“>delete</button> <!– </snippet_Delete> –> </td> </tr> } } </tbody> </table> <a asp-page=”Create”>Create New</a> </form> |
index.cshtmlファイル をサーバーが解析をして、埋め込まれている タグヘルパー に対応する C# の コード を実行します。
C# の コード を実行することで、タグヘルパー を情報源にして HTML 要素を作成 し、レンダリング をします。
つまり、ブラウザに表示するHTMLを作成します。
タグヘルパー は、@ 識別子 で始まるものや、タグ要素の 属性 として指定します。
主な タグヘルパー には次のようなものがあります。
| @ 識別子 | タグ要素の属性 |
| @model @page @section @inject @using @for @foreach @if @else @switch | asp-for: モデル式にバインドする属性です。<input> や <label> などの要素で使用できます。 asp-action: アクションメソッドにバインドする属性です。<a> や <form> などの要素で使用できます。 asp-controller: コントローラー名にバインドする属性です。<a> や <form> などの要素で使用できます。 asp-route: ルート値にバインドする属性です。<a> や <form> などの要素で使用できます。 asp-append-version: 静的ファイルのバージョン番号を追加する属性です。<img> や <link> などの要素で使用できます。 asp-area: エリア名にバインドする属性です。<a> や <form> などの要素で使用できます。 asp-validation-for: モデル式に対する検証メッセージを表示する属性です。<span> 要素で使用できます。 asp-validation-summary: モデル全体に対する検証メッセージを表示する属性です。<div> 要素で使用できます。 asp-items: 選択肢を提供するコレクションにバインドする属性です。<select> 要素で使用できます。 asp-antiforgery: アンチフォージェリートークンを生成する属性です。<form> 要素で使用できます |
なお、上記サンプルにある @contact.Id や @contact.Name は、変数を参照するための タグヘルパーです。
タグヘルパー についての詳細ココを参照してください。
ASP.NET Core の組み込みタグ ヘルパー | Microsoft Learn
次に PageModelクラス について見ていきましょう。
Razor Pages では、PageModelクラス は、“.cs” という拡張子を持つファイルで、 Razorページの “.cshtml” ファイルに対応する ページのロジック を記述するファイルです。
PageModelクラス には、例えば、HTTP GET 要求がページに対して行われたときに呼び出される OnGet メソッドや、データの登録処理などを記述することができます。
PageModelクラス を使用して ロジック と ビュー を分離して記述することができます。
PageModelクラス 名は、例えば、Index.cshtml に対応する PageModelクラス は、Index. cshtml.cs という名前になります。
以下に、PageModelクラス の例を示します。
| using Microsoft.AspNetCore.Mvc.RazorPages; namespace RazorPagesSample.Pages { public class IndexModel : PageModel { public string Message { get; set; } public void OnGet() { Message = “Hello world!”; } } } |
上記例はブラウザからの Getリクエスト の処理を OnGet メソッド で行っています。
そして、”Hello world!” を Razorページ の Index.cshtml に返しています。
ちなみに、Index.cshtml は次のようになります
| @page @model RazorPagesSample.Pages.IndexModel <!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <h1>@Model.Message</h1> </body> </html> |
Razor Pagesモデル では、Razorページ と PageModelクラス が協力し合って、ビュー処理 と ロジック処理 をそれぞれが担っています。
| Razorページ | 拡張子“.cshtml” ビューの部分を担当。※ ※PageModelクラスを使うことで、ビューとモデルの分離ができます。 タグヘルパーを埋め込み、サーバー側のC#コードを使用して、HTMLの作成やレンダリングを行う。 |
| PageModelクラス | 拡張子“.cshtml.cs” Razorページのモデル部分を担当。 PostリクエストやGetリクエストのコード処理を行い、結果をビューであるRazorページに返したり、データの登録処理などを行う。 |
次に、Razorページ の ファイル名 と パス と URL の関係についてです。
次のような関係になっています。
| ファイル名とパス | 一致 URL |
| /Pages/Index.cshtml | / または /Index |
| /Pages/Contact.cshtml | /Contact |
| /Pages/Store/Contact.cshtml | /Store/Contact |
| /Pages/Store/Index.cshtml | /Store または /Store/Index |
最後に Razor Pageモデル のプロジェクトを作成したときに Program.cs ファイルに記述されるコードについて確認しておきます。
Razor Pageモデル の プロジェクト には、赤字の部分 のコードが付加されます。
| builder.Services.AddRazorPages(); var app = builder.Build(); if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler(“/Error”); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.MapRazorPages(); |
以上、Razor Pages の Razorページ、PageModelクラス、Razorページのファイル名とパスとURLの関係、Program.csの内容の確認でした。
追記
理解をしながらチュートリアルを行っています。
なかなか理解できず、歩みは、ゆっくりです。
8月9日から12日の4連休でチュートリアルの「作成、読み取り、更新、および削除」まで一応、終了しました。
一応というのも、「過剰ポスティング」対策など理解できない概念が、まだあるからです。
次の4連休は、8月30日から9月2日を予定しています。
その頃は、まだまだ、暑い時期でしょうから、冷房の効いた部屋で、チュートリアルにいそしみたいと思っています。
とにかく、私は、からっきし暑さに弱いので、庭仕事はもう少しお休みです。
