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>
}