ASP.NET Core のオプション パターンについて調べて、いろいろ分かったことがありましたので、以下に備忘録として書いておくことにします。

ASP.NET Core でのオプションパターンとは何かを簡単に書きますと、appsettings.json などの構成設定を、厳密な型が定義された POCO (Plain Old CLR Object) クラスにバインドし、型安全かつシンプルに扱うためのデザインパターンということです。詳しくは Microsoft のドキュメント「ASP.NET Core のオプション パターン」を見てください。

この記事では、OptionsConfigurationServiceCollectionExtensions.Configure メソッドのオーバーロード Configure<TOptions>(IServiceCollection, IConfiguration) を利用して、appsettings.json のあるセクションから情報を読んで、その情報を POCO に格納し、DI コンテナに登録して ASP.NET Core アプリで利用するケースについて説明します。

(1) appsettings.json

以下の内容とします。この中の SoapService セクションの内容を POCO に取り込みます。

{
  ・・・中略・・・

  "SoapService": {
    "SoapScheme": "https",
    "SoapServiceHost": "SoapDevService",
    "CustomerAccountManager": {
      "Endpoint": "{SoapScheme}://{SoapServiceHost}/CustomerAccountManager.asmx",
      "Username": "",
      "Password": "",
      "TimeoutSeconds": 30,
      "MaxReceivedMessageSize": 10485760
    }
  }
}

(2) POCO クラスの定義

POCO のクラス定義は以下の通りとします。パブリックプロパティの名前は appsettings.json の各項目の名前と一致させる必要があります。SoapService フィールドは Microsoft のドキュメントのサンプルコードにならって追加しました。アプリのコード（この記事では Program.cs）で "SoapService" 文字列をハードコーディングしないようにするために追加するとのことです。

namespace RazorPages.Models
{
    public class SoapServiceOptions
    {
        public const string SoapService = "SoapService";
        public string SoapScheme { get; set; } = "";
        public string SoapServiceHost { get; set; } = "";
        public CustomerAccountManagerConfig CustomerAccountManager { get; set; } = new();
    }

    public class CustomerAccountManagerConfig
    {
        public string Endpoint { get; set; } = "";
        public string Username { get; set; } = "";
        public string Password { get; set; } = "";
        public int TimeoutSeconds { get; set; } = 0;
        public int MaxReceivedMessageSize { get; set; } = 0;
    }
}

(3) Configure メソッドを追加

Program.cs に以下のように Configure メソッドを追加します。Configure メソッドは内部で次のことを行います： (1) IConfiguration のセクションを読み取る、(2) Bind() を使って TOptions に値をコピーする、(3) 結果 Options パターン（IOptions<TOptions>, IOptionsSnapshot<TOptions>, IOptionsMonitor<TOptions>）が DI コンテナに登録されます。

namespace RazorPages
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // ・・・中略・・・

            // Configure メソッドを追加
            builder.Services.Configure<SoapServiceOptions>(
                builder.Configuration.GetSection(SoapServiceOptions.SoapService));

            // ・・・中略・・・
        }
    }
}

Options パターン IOptions<TOptions>, IOptionsSnapshot<TOptions>, IOptionsMonitor<TOptions> の違いを簡単に説明すると以下の通りです。

1. IOptions<TOptions>（シングルトン相当）アプリ起動時に設定ファイルを読み込み、常に同じ設定値を保持し続けます。
2. IOptionsSnapshot<TOptions>（スコープ相当）IOptionsSnapshot を使ってDIを受け取ると、HTTPリクエストごとに appsettings.json の変更を検知して最新の値に再生成してくれます。
3. IOptionsMonitor<SoapService>（シングルトン相当＋リアルタイム通知）シングルトンでありながら、設定ファイルが書き換わった瞬間に最新の値を反映・通知できる特殊なライフサイクルです。

(4) 一部内容を書き換え

PostConfigure を使って一部の内容を書き換えます。Program.cs で Configure メソッドの後に以下のようにコードを追加します。SoapServiceHost に DateTime.Now.ToString() を設定したのは書き変わるタイミングを知るためです。IOptionsSnapshot と IOptionsMonitor で SoapServiceHost の書き換えのタイミングがどのように異なるかが興味のあるところです。

namespace RazorPages
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // ・・・中略・・・

            // Configure メソッドを追加
            builder.Services.Configure<SoapServiceOptions>(
                builder.Configuration.GetSection(SoapServiceOptions.SoapService));

            // 一部内容の書き換え
            builder.Services.PostConfigure<SoapServiceOptions>(soap =>
            {
                soap.SoapServiceHost = DateTime.Now.ToString();
                soap.CustomerAccountManager.Endpoint = "/new-endpoint";
            });

            // ・・・中略・・・
        }
    }
}

(5) ページ/コントローラーでの情報の取得

ページ/コントローラーでの情報の取得は、ASP.NET Core に備わっている DI 機能を使って、コンストラクタの引数に IOptions<TOptions>, IOptionsSnapshot<TOptions>, IOptionsMonitor<TOptions> を注入してやることで可能です。以下のコードは Razor Pages の例で、この記事の一番上に貼った画像に示すページを表示したものです。

Config.html.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Options;
using RazorPages.Models;

namespace RazorPages.Pages
{
    public class ConfigModel : PageModel
    {
        private readonly SoapServiceOptions _soap;
        private readonly SoapServiceOptions _soapSnapshot;
        private readonly SoapServiceOptions _soapMonitor;

        public ConfigModel(IOptions<SoapServiceOptions> soap, 
               IOptionsSnapshot<SoapServiceOptions> soapSnapshot, 
               IOptionsMonitor<SoapServiceOptions> soapMonitor)
        {
            _soap = soap.Value;
            _soapSnapshot = soapSnapshot.Value;
            _soapMonitor = soapMonitor.CurrentValue;
        }

        public string SoapScheme => _soap.SoapScheme;
        public string SoapServiceHost => 
            _soap.SoapServiceHost;
        public string SoapEndpoint => 
            _soap.CustomerAccountManager.Endpoint;

        public string SoapSchemeSnapshot => 
            _soapSnapshot.SoapScheme;
        public string SoapServiceHostSnapshot => 
            _soapSnapshot.SoapServiceHost;
        public string SoapEndpointSnapshot => 
            _soapSnapshot.CustomerAccountManager.Endpoint;

        public string SoapSchemeMonitor => 
            _soapMonitor.SoapScheme;
        public string SoapServiceHostMonitor => 
            _soapMonitor.SoapServiceHost;
        public string SoapEndpointMonitor => 
            _soapMonitor.CustomerAccountManager.Endpoint;

        public void OnGet()
        {
        }
    }
}

Config.html

@page
@model RazorPages.Pages.ConfigModel

@{
    ViewData["Title"] = "Config";
}

<h3>IOptions<TOptions></h3>
<ul>
    <li>SoapScheme: @Model.SoapScheme</li>
    <li>SoapServiceHost: @Model.SoapServiceHost</li>
    <li>SoapEndpoint: @Model.SoapEndpoint</li>
</ul>

<h3>IOptionsSnapshot<TOptions></h3>
<ul>
    <li>SoapScheme: @Model.SoapSchemeSnapshot</li>
    <li>SoapServiceHost: @Model.SoapServiceHostSnapshot</li>
    <li>SoapEndpoint: @Model.SoapEndpointSnapshot</li>
</ul>

<h3>IOptionsMonitor<TOptions></h3>
<ul>
    <li>SoapScheme: @Model.SoapSchemeMonitor</li>
    <li>SoapServiceHost: @Model.SoapServiceHostMonitor</li>
    <li>SoapEndpoint: @Model.SoapEndpointMonitor</li>
</ul>

(6) 検証結果の説明

この記事の一番上の画像は検証用に作成した ASP.NET Core Razor Pages アプリの Config ページを表示したものです。赤および青の下線を引いた部分の違いがポイントです。

IOptions<TOptions> はシングルトンですので、アプリを再起動しない限り常に同じ値を保持し続けます。appsettings.json ファイルの SoapScheme を https ⇒ http に書き換えても、Program.cs の PostConfigure メソッドで時刻を設定し直しても、赤および青の下線を引いた部分は変わりません。

IOptionsSnapshot<TOptions> スコープ相当ですので、HTTP 要求ごとに appsettings.json の変更および PostConfigure メソッドでの書き換え検知して最新の値に再生成してくれます。上の画像は appsettings.json ファイルの SoapScheme を https ⇒ http に書き直して保存した後、再度 HTTP リクエストをかけてその応答を示したものです。この後も SoapServiceHost は要求・応答の度にその時刻に変わります。

IOptionsMonitor<TOptions> は基本シングルトンですが、appsettings.json ファイルが書き換わった瞬間に最新の値を反映してくれます。上の画像は appsettings.json ファイルの SoapScheme を https ⇒ http に書き直して保存した後、再度 HTTP リクエストをかけてその応答を示したものです。SoapServiceHost は appsettings.json ファイルが書き換わった時刻になります。その後はシングルトンとして動きますので、appsettings.json ファイルを書き換えない限り何度 HTTP リクエストをかけても値は変わりません。

上記のような Page や Controller で値を受け取るという使い方なら IOption または IOptionSnapshot を使えばよく、IOptionsMonitor の出番は無さそうです。IOptionsMonitor はこのような使い方ではなくて、IOptionsMonitor<TOptions>.OnChange メソッドでリスナーを登録し、設定変更を即時検知してそのリスナーでサーバー側で何か動かす（キャッシュ更新、長寿命サービスの設定差し替え、接続中クライアントへの通知など）のに使うのが適切なようです。

IOptionsMonitor<TOptions>.OnChange メソッドを使った例は別の記事に書く予定です。

ASP.NET Core MVC または Razor Pages アプリで、ユーザーがコレクションの要素の一部を削除して残りの要素を POST してきた場合に、送信されてきた残りの要素からなるコレクションのモデルバインディングを行うにはどうするかという話を書きます。

先の記事「コレクションのデータアノテーション検証」に書きましたように、コレクションのモデルバインディングがうまく行われるようにするには、レンダリングされる input 要素の name 属性が連番のインデックスを含むようにします。具体的には、name="prefix[index].Property" というパターンとし、index は 0 から始まる連番とします。

この記事の例として上の画像のようなアプリを考えます。ユーザーが［Remove］ボタンをクリックしてある項目を削除してから［Submit］ボタンをクリックすると、残った項目のコレクションが POST されます。

その場合、POST されたコレクションの input 要素の name="prefix[index].Property" 属性の index が連続しなくなってしまいます。

index の数字の連続が途切れた場合、何も対応がされてなければそれ以降の要素はバインドされません。では、バインドされるようにするにはどういう対応を取ったらいいのでしょうか？

Microsoft のドキュメント「ASP.NET Core でのモデル バインド」の Collections のセクションの 5 つ目のコード例にある、selectedCourses.index=a&selectedCourses.index=b というような index を示すデータを一緒にPOST することにより連番でなくてもモデルバインドされるようになります。

例えば、index が 0 の場合、ASP.NET から以下の様な html 要素がレンダリングされるようにコーディングします。

<input type="hidden" name="prefix.Index" value="0" />
<input name="prefix[0].Property" value="ABC" />

参考に上の画像の ASP.NET Core Razor Pages アプリのコードを以下に載せてておきます。Visual Studio 2026 のテンプレートを使ってターゲットフレームワークを .NET 10 として作成したものです。

Model

using System.ComponentModel.DataAnnotations;

namespace RazorPages.Models
{    public class Country
    {
        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "国名")]
        public string Name { get; set; } = string.Empty;

        public CountryInfo Details { get; set; } = new();
    }

    public class CountryInfo
    {
        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "首都")]
        public string Capital { get; set; } = string.Empty;

        [Required(ErrorMessage = "{0} は必須")]
        [StringLength(15, ErrorMessage = "{0} は {1} 文字以内")]
        [Display(Name = "大陸")]
        public string Continent { get; set; } = string.Empty;
    }

    public class ListCountriesViewModel
    {
        public List<Country> CountryList { get; set; } = new();
        public List<Country> SelectedCountries { get; set; } = new();
    }
}

CountryList.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPages.Models;

namespace RazorPages.Pages
{
    public class CountryListModel : PageModel
    {
        [BindProperty]
        public ListCountriesViewModel List { get; set; } = new();

        public void OnGet()
        {
            List = new ListCountriesViewModel
            {
                CountryList = GetDefaultCountries()
            };
        }

        public IActionResult OnPost()
        {
            if (ModelState.IsValid)
            {
                var posted = List.CountryList;
                List = new ListCountriesViewModel
                {
                    CountryList = posted,
                    SelectedCountries = posted
                };

                // POST された値は ModelState ディクショナリ（model ではない）
                // に格納されていて、Tag Helper はまず ModelState ディクショ
                // ナリを調べ、そこに値があればそれを表示する仕組みになっている。
                // なので、posted の値の通り表示するには ModelState をクリア
                // する必要がある
                ModelState.Clear();                
            }
            else
            {
                List = new ListCountriesViewModel
                {
                    CountryList = GetDefaultCountries()
                };
            }

            return Page();
        }

        private static List<Country> GetDefaultCountries()
        {
            var countries = new List<Country>
            {
                new Country()
                {
                    Name = "Italy",
                    Details = new CountryInfo
                    {
                        Capital = "Rome",
                        Continent = "Europe"
                    }
                },
                new Country()
                {
                    Name = "Spain",
                    Details = new CountryInfo
                    {
                        Capital = "Madrid",
                        Continent = "Europe"
                    }
                },
                new Country()
                {
                    Name = "USA",
                    Details = new CountryInfo
                    {
                        Capital = "Washington",
                        Continent = "NorthAmerica"
                    }
                },
                new Country()
                {
                    Name = "Japan",
                    Details = new CountryInfo
                    {
                        Capital = "Tokyo",
                        Continent = "Asia"
                    }
                },
                new Country()
                {
                    Name = "Australia",
                    Details = new CountryInfo
                    {
                        Capital = "Canberra",
                        Continent = "Oceania"
                    }
                }
            };

            return countries;
        }
    }
}

CountryList.cshtml

@page
@model RazorPages.Pages.CountryListModel

<h4>Remove countries not to submit</h4>
<form method="post">
    <table class="table">
        <thead>
            <tr>
                <th>
                    <label asp-for="List.CountryList[0].Name"></label>
                </th>
                <th>
                    <label asp-for="List.CountryList[0].Details.Capital"></label>
                </th>
                <th>
                    <label asp-for="List.CountryList[0].Details.Continent"></label>
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.List.CountryList.Count; i++)
            {
                <tr class="country-row">
                    <input type="hidden" name="List.CountryList.Index" value="@i" />
                    <td>
                        <input asp-for="List.CountryList[i].Name" class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Name" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="List.CountryList[i].Details.Capital" 
                            class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Details.Capital" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <input asp-for="List.CountryList[i].Details.Continent" 
                            class="form-control" />
                        <span asp-validation-for="List.CountryList[i].Details.Continent" 
                            class="text-danger"></span>
                    </td>
                    <td>
                        <button type="button"
                                class="btn btn-danger"
                                onclick="this.closest('.country-row').remove();">
                            Remove
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <input type="submit" value="Submit" class="btn btn-primary" />
</form>

<hr />
     
<h4>Countries submitted</h4>
<ul>
    @if (Model.List.SelectedCountries != null &&
         Model.List.SelectedCountries.Count > 0)
    {
        foreach (var country in Model.List.SelectedCountries)
        {
            <li>@country.Name</li>
        }
    }
    else
    {
        <li>No countries submitted.</li>
    }
</ul>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

SQL Server のテーブルの CRUD を行う ASP.NET Core Razor Pages アプリで、ユーザーがレコードを編集・更新する際、対象レコードを Bootstrap Modal に表示し、ユーザーが編集を行った後 Bootstrap Modal 上の [Update] ボタンをクリックすると、レ��ードを更新する方法を紹介します。

先の記事「ASP.NET Core Razor Pages で Bootstrap Modal の利用」で Delete する前に削除するレコードの内容を確認するため Bootstrap Modal を使う方法を書きました。その続きです。

編集・更新は普通に別ページに遷移してそこで行って何ら不都合はないと思いますし、Bootstrap Modal を使うメリットはない（複雑になるデメリットしかない）とは思いますが、せっかく作ったのでブログに書いておくことにしました。

問題は Model のプロパティに付与する StringLength とか RegularExpression などのデータアノテーション属性によるユーザー入力の検証です。普通に別ページに遷移して行う時と同様、上の画像のように表示したいのですが、それがかなり面倒でした。特にクライアント側での検証を無効にしてサーバー側で検証を行う場合はいろいろ気を付けなければならないことがあります。

以下に、上の画像を表示するのに使った ASP.NET Core Razor Pages アプリのソースコードを載せて、気を付けるべき点を書いておきます。元になるアプリは、Visual Studio 2026 のテンプレートを使って、ターゲットフレームワーク .NET 10 で作成しました。

(1) Movie.cs（モデル）

ユーザー入力検証用のデータアノテーション属性をプロパティに付与します。この記事の例では Required、StringLength、Range を使いました。

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

namespace RazorPages.Models;

[Table("Movie")]
public partial class Movie
{
    [Key]
    public int Id { get; set; }

    [Display(Name = "タイトル")]
    [StringLength(128, MinimumLength = 5, 
        ErrorMessage = "{0}は{2}文字以上{1}文字以下でなければなりません。")]
    public string? Title { get; set; }

    [Display(Name = "公開日")]
    [Required(ErrorMessage = "{0}は必須です。")]
    [DisplayFormat(DataFormatString = "{0:yyyy年M月d日}")]
    public DateTime ReleaseDate { get; set; }

    [Display(Name = "ジャンル")]
    [StringLength(128, 
        ErrorMessage = "{0}は{1}文字以下でなければなりません。")]
    public string? Genre { get; set; }

    [Display(Name = "価格")]
    [Required(ErrorMessage = "{0}は必須です。")]
    [Range(100, 10000,
        ErrorMessage = "{0}は{1}から{2}の間でなければなりません。")]
    [DisplayFormat(DataFormatString = "{0:C0}")]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

(2) Movie2/Index.cshtml.cs

Visual Studio 2026 のスキャフォールディング機能を使って、SQL Server の Movie テーブルの CRUD を行うコードを自動生成させ、CRUD の Read を行う（レコード一覧を表示する）Index ページに手を加えました。

EditMovie プロパティ、OnGetMovieToEditAsync メソッド、OnPostUpdateAsync メソッド、MovieExists メソッドは、スキャフォールディング機能で自動生成された Movie2/Edit.cshtml.cs のコードに少し手を加えて使いました。コメントの説明を見てください。

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using RazorPages.Models;
using RazorPages.Data;

namespace RazorPages.Pages.Movies2
{
    public class IndexModel : PageModel
    {
        private readonly TestDatabaseContext _context;

        public IndexModel(TestDatabaseContext context)
        {
            _context = context;
        }

        // 編集対象の Movie データの授受に用いるプロパティを追加
        [BindProperty]
        public Movie EditMovie { get; set; } = default!;

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

        public async Task OnGetAsync()
        {
            Movie = await _context.Movies.ToListAsync();
        }

        // 指定された id のデータを Movie テーブルから取得し JSON 形式で返す
        // ハンドラを追加。このデータを　Bootstrap Modal に表示する
        public async Task<IActionResult> OnGetMovieToEditAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var movie = await _context.Movies
                              .FirstOrDefaultAsync(m => m.Id == id);
            if (movie == null)
            {
                return NotFound();
            }
            
            return new JsonResult(movie);
        }

        // クライアントから送信されてきた EditMovie プロパティの内容でMovie
        // テーブルの当該レコードを更新するハンドラを追加
        public async Task<IActionResult> OnPostUpdateAsync()
        {
            if (!ModelState.IsValid)
            {
                // 検証エラーがある場合

                // Movie を再取得。これがないと return Page(); でリストを再表示す
                // る際、Index.cshtml の @foreach (var item in Model.Movie)
                // でエラーになる
                Movie = await _context.Movies.ToListAsync();

                // 検証エラーがあることを Index.cshtml に伝えるため、ViewData に
                // フラグをセット。これを受けて Index.cshtml ではモーダルを表示する
                ViewData["ValidationResult"] = "invalid";

                // 元の Index ページを再表示。上のフラグを "invalid" にセットして
                // いるので Index ページには Modal が表示され、EditMovie の内容
                // がエラーメッセージとともに表示される
                return Page();
            }

            _context.Attach(EditMovie).State = EntityState.Modified;

            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!MovieExists(EditMovie.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return RedirectToPage("./Index");
        }

        private bool MovieExists(int id)
        {
            return _context.Movies.Any(e => e.Id == id);
        }
    }
}

(3) Movie2/Index.cshtml

リストの右横の Edit リンクをクリックすると JavaScript のメソッド openModal が呼び出され、その引数に当該レコードの id が渡されます。openModal は fetch を使ってハンドラ OnGetMovieToEditAsync を呼び出します。ハンドラ OnGetMovieToEditAsync は Movie テーブルから id で指定されたレコードを抽出し JSON 形式で返します。JSON を受け取ったらその内容を from タグ内の input 要素に書き込み、Modal を表示します。

ユーザーが Modal に表示された内容を編集後、[Update] ボタンをクリックすると、from タグには method="post" asp-page-handler="Update" と指定されているので、ハンドラ OnPostUpdateAsync に編集されたデータが post され、その内容で Movie テーブルの当該レコードが更新されます。

ポイントは from タグとその中身を、以下のコードのように、初期ページの内容に含むようにしておくことです。そうすることによって、サーバー側の検証 NG で元の Index ページに差し戻す際に、Modal 上のテキストボックスにはユーザーが編集した結果が表示され、検証 NG の場合はアノテーション属性に設定したエラーメッセージが表示されます。その結果がこの記事の上の画像です。

@page
@model RazorPages.Pages.Movies2.IndexModel

@{
    ViewData["Title"] = "Index";
}

<!-- Bootstrap Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
     data-bs-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5"
                    id="staticBackdropLabel">
                    Edit Movie
                </h1>
                <button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" asp-page-handler="Update">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="hidden" asp-for="EditMovie.Id" />
                    <div class="form-group">
                        <label asp-for="EditMovie.Title" class="control-label"></label>
                        <input asp-for="EditMovie.Title" class="form-control" />
                        <span asp-validation-for="EditMovie.Title" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <span class="text-danger">*</span>
                        <label asp-for="EditMovie.ReleaseDate" class="control-label"></label>
                        <input asp-for="EditMovie.ReleaseDate" class="form-control" aria-required="true" />
                        <span asp-validation-for="EditMovie.ReleaseDate" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="EditMovie.Genre" class="control-label"></label>
                        <input asp-for="EditMovie.Genre" class="form-control" />
                        <span asp-validation-for="EditMovie.Genre" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <span class="text-danger">*</span>
                        <label asp-for="EditMovie.Price" class="control-label"></label>
                        <input asp-for="EditMovie.Price" class="form-control" aria-required="true" />
                        <span asp-validation-for="EditMovie.Price" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <input type="submit" value="Update" class="btn btn-primary" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<h1>Index</h1>

<p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].ReleaseDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Genre)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Movie) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ReleaseDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Price)
            </td>
            <td>
                <a href="javascript:void(0);" 
                    onclick="openModal(@item.Id)">Edit</a>
            </td>
        </tr>
}
    </tbody>
</table>
@section scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

    <script>
        window.openModal = async function (id) {
            const url = '@Url.Page("/Movies2/Index", "MovieToEdit")' + '&id=' + id;
            const response = await fetch(url);
            if (response.ok) {
                const data = await response.json();
                document.getElementById('@Html.IdFor(model => model.EditMovie.Id)').value = data.id;
                document.getElementById('@Html.IdFor(model => model.EditMovie.Title)').value = data.title;
                document.getElementById('@Html.IdFor(model => model.EditMovie.ReleaseDate)').value = data.releaseDate;
                document.getElementById('@Html.IdFor(model => model.EditMovie.Genre)').value = data.genre;
                document.getElementById('@Html.IdFor(model => model.EditMovie.Price)').value = data.price;

                // クライアント側での検証を有効にしておくとユーザー入力不正で検証メッセージ
                // が表示される。ページを再描画しない限りその検証メッセージは書き換えられる
                // ことはないので、そこで Modal を閉じて別の行で Modal を再表示すると前回
                // の検証メッセージが残ってしまう。下のスクリプトで検証メッセージを消す
                const validators = document.querySelectorAll("span[data-valmsg-for]");
                validators.forEach(function (validator) {
                    validator.innerText = "";
                });

                // 上の fetch で取得したデータを Modal 内のテキストボックスにセットして
                // から Modal を表示する。下の 'staticBackdrop' は Modal の id です
                const modal = document.getElementById('staticBackdrop');
                const editModal = new bootstrap.Modal(modal);
                editModal.show();
            }
        };

        // クライアント側での検証を無効にしサーバー側で検証を行う場合に、検証結果が 
        // NG だった場合に Modal を再表示するためのスクリプト
        window.addEventListener('DOMContentLoaded', () => {
            if ('@ViewData["ValidationResult"]' === "invalid") {
                const modal = document.getElementById('staticBackdrop');
                const editModal = new bootstrap.Modal(modal);
                editModal.show();
            }
        });
    </script>
}