Webアプリ CRUD操作のメニュー画面の作成方法

データベースのテーブルに対するCRUD操作を行うためのメニュー画面の作成方法について記述します。
次の４つの項目ごとに記述します。

① 見出しを表示する方法
② テーブルデータの一覧を表示する方法
③ Create（レコードの新規作成）画面へリンク設定する方法
④ 選択したレコードの編集画面、詳細画面、削除画面へのリンク設定をする方法

当掲載内容は、スキャフォールディングとマイグレーションの実施を終えていることを前提にしています。

見出しの表示方法

見出しの表示をするためには、モデルクラス、ページモデルクラス、Razorページのそれぞれに設定すべき内容があります。

モデルクラスの設定

モデルクラスのプロパティ名が見出しの項目名になります。
[Display(Name = “日付”)] のように指定すると、指定した日付が見出しの名前になります。

モデルクラス (Value.cs)

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BGC.Models
{
    public class Value
    {
        public int id { get; set; }
        [Display(Name = “日付”)]
        [DataType(DataType.Date)]
        public DateTime Date { get; set; }
        [Display(Name = “時分”)]
        [DataType(DataType.Time)]
        public DateTime Time { get; set; }
        [Required]
        [Column(TypeName =”decimal(18,0)”)]
        [Display(Name = “血糖値”)]
        public decimal BloodGlucoseValue { get; set; }
        [Range(1,23)]
        [Display(Name = “時間帯”)]
        public int TimeZone { get; set; }
        [Display(Name = “備考”)]
        public string Comment { get; set; }
       [Display(Name = “仕事Flg”)]
        public bool WorkFlg { get; set; }
        public bool FastingFlg { get;set; }
    }
}

ページモデルクラスの設定

① テーブルレコードを格納するリストを次のように定義します。
　 public IList Value { get;set; } = default!;

② ToListAsyncメソッドでリストにテーブルレコードのデータを格納します。
　 Value = await _context.Value.ToListAsync();

ページモデルクラス (Index.cshtml.cs)

～省略～
{
   public class IndexModel : PageModel
    {
        private readonly BGC.Data.BGCContext _context;

        public IndexModel(BGC.Data.BGCContext context)
        {
            _context = context;
        }

        public IList<Value> Value { get;set; } = default!;

        public async Task OnGetAsync()
        {
            if (_context.Value != null)
            {
                Value = await _context.Value.ToListAsync();
            }
        }
    }
}

Razorページの設定

Razorページでは @Html.DisplayNameFor(model => model.Value[0].Date) のようにモデルリストの0番を指定します。
モデルリストはページモデルの次のコードで定義したものです。
　コレです⇒public IList<Value> Value { get;set; } = default!

Razorページ（Index.cshtml）

～　省略　～
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Value[0].Date)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Value[0].Time)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Value[0].BloodGlucoseValue)
    </th>
    <th>
       @Html.DisplayNameFor(model => model.Value[0].TimeZone)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Value[0].Comment)
    </th>
    <th>
       @Html.DisplayNameFor(model => model.Value[0].WorkFlg)
    </th>
    <th>
       @Html.DisplayNameFor(model => model.Value[0].FastingFlg)
    </th>
    <th></th>
</tr>
～　省略　～

以下は見出し表示の全体を示したものです。

テーブルデータの表示方法

テーブルデータを表示するためには、ページモデルクラス、Razorページのそれぞれに設定すべき内容があります。

ページモデルクラスの設定

①　テーブルレコードを格納するリストを次のように定義します。
　 public IList Value { get;set; } = default!;

②　ToListAsyncメソッドでリストにテーブルレコードのデータを格納します。
　 Value = await _context.Value.ToListAsync();

※①②の設定は、表題の表示方法で記述した内容を同じです。

Razorページの設定

リスト（IList<Value> Value ）のデータを一件ずつforeachでitem変数に取出し、
@Html.DisplayFor(modelItem => item.Date) のように指定して画面にデータを表示します。

Razorページ（Index.cshtml）

～省略～
    <tbody>
@foreach (var item in Model.Value) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Time)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.BloodGlucoseValue)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.TimeZone)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Comment)
            </td>
            <td>
               @Html.DisplayFor(modelItem => item.WorkFlg)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FastingFlg)
            </td>
            <td>
                <a asp-page=”./Edit” asp-route-id=”@item.id”>Edit</a> |
                <a asp-page=”./Details” asp-route-id=”@item.id”>Details</a> |
                <a asp-page=”./Delete” asp-route-id=”@item.id”>Delete</a>
            </td>
        </tr>
}
    </tbody>
～省略～

以下はデータ表示の全体を示したのもです。

Create（レコードの新規作成）画面へリンク設定する方法

RazorページにCreateページのリンクをアンカーヘルパータグで指定します。

<a asp-page=”Create”>

Razorページ（Index.cshtml）

@page
@model BGC.Pages.IndexModel

@{
    ViewData[“Title”] = “Index”;
}

<h1>Index</h1>

<p>
    <a asp-page=”Create”>Create New</a>
</p>
<table class=”table”>
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Value[0].Date)
            </th>
～以下省略～

<a asp-page=”Create”>
は、次のHTMLにレンダリングされます。
<a href=”/Create”>Create New</a>

デフォルト設定では、プロジェクトフォルダ/Pagesフォルダがルートになります。
Create.cshtmlは、ルートに置かれているため、<a href=”/Create”>とレンダリングされます。
なお、当然ですが、Index.cshtmlもルートに置かれています。

asp-pageは、ASP.NET Core Razor Pagesで使用されるタグヘルパーの1つです。
アンカータグヘルパーの詳細は ASP.NET Core のアンカータグヘルパーを参照してください。

選択したレコードの編集画面、詳細画面、削除画面へのリンク設定をする方法

Razorページに asp-route-id=”@item.id” と指定します。

<a asp-page=”./Edit” asp-route-id=”@item.id“>Edit</a>
は、次のHTMLにレンダリングされます。
<a href=”/Edit/1”>Edit</a>

赤字の１は、選択したデータによって、値が変わります。

asp-route-id属性は、リンクにIDパラメータを付与するために使用されます。
asp-route-id属性は、IDパラメータの値を指定するために使用されます。
IDパラメーターは、リンクに付与する情報として使用されます。（リクエストに付加される情報）
ここでは、IDパラメーターの値は、テーブルのプライマリキーの値と同じ、と理解してよいようです。

Razorページ（Index.cshtml）

@page
@model BGC.Pages.IndexModel

@{
    ViewData[“Title”] = “Index”;
}

<h1>Index</h1>

<p>
    <a asp-page=”Create”>Create New</a>
</p>
<table class=”table”>
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Value[0].Date)
            </th>
～途中省略～
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Value) {
       <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td>
～途中省略～
            <td>
                @Html.DisplayFor(modelItem => item.FastingFlg)
            </td>
            <td>
                <a asp-page=”./Edit” asp-route-id=”@item.id“>Edit</a> |
                <a asp-page=”./Details” asp-route-id=”@item.id“>Details</a> |
                <a asp-page=”./Delete” asp-route-id=”@item.id“>Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

以下は選択レコードのリンクについての全体を示したのもです。