Razor Pagesのフォームの入力内容を検証する - シンプルな例 - ASP.NET Core

Razor Pagesのフォームの入力内容を検証するコードを紹介します。

概要

Razor Pagesでフォームの入力内容を検証するには ModelState.IsValid プロパティを利用する方法があります。
この記事では、ModelState.IsValid を利用したシンプルなフォームの検証コードを紹介します。

プログラム例

コード

Pages/SimpleValidation01.cshtml

@page
@model RazorPagesValidation.Pages.SimpleValidation01Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
  <head></head>
  <body>
    <h2>入力内容の検証のデモ</h2>
    <form method="post">
      <input type="text" asp-for="inputText"/>
      <input type="submit" value="Exec" />
    </form>

    <p>@Model.MessageText</p>
  </body>
</html>

Pages/SimpleValidation01.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.ModelBinding;

namespace RazorPagesValidation.Pages
{
  public class SimpleValidation01Model : PageModel
  {
    [BindProperty]
    public string inputText { get; set; }

    public string MessageText { get; set; }

    public void OnGet()
    {
    }

    public PageResult OnPost()
    {
      if (ModelState.IsValid == true)
      {
        MessageText = "処理は成功しました。";
        return Page();
      }
      else
      {
        foreach (ModelStateEntry se in ModelState.Values) {
          foreach (ModelError me in se.Errors) {
            MessageText += me.ErrorMessage;
          }
        }
        return Page();
      }

    }
  }
}

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();

解説

Razor Pageでは、フォームタグ内にテキストボックスとPOSTするサブミットボタンを配置しています。

    <form method="post">
      <input type="text" asp-for="inputText"/>
      <input type="submit" value="Exec" />
    </form>

フォームの外側にメッセージを表示する枠を用意しページモデルクラスのMessageTextプロパティの内容を表示します。

     <p>@Model.MessageText</p>

ページモデルクラスでは、テキストボックスの値を保持するinputText プロパティと、画面にメッセージを表示するMessageText プロパティを用意します。 inputText プロパティはフォームのテキストボックスからの入力を受け取るため、BindProperty 属性を記述します。

   [BindProperty]
    public string inputText { get; set; }

    public string MessageText { get; set; }

サブミットボタンを押した際に、POST処理が実行され、ページモデルクラスの下記のコード OnPost() メソッドが呼び出されます。
IsValidプロパティが true の場合はフォームの入力内容は正常で、処理を実行できます。今回の例では画面に「処理は成功しました」のメッセージを表示します。
IsValidプロパティが false の場合はフォームの入力内容の検証に失敗したことになります。この場合は、エラーメッセージをページに表示します。エラーメッセージは複数の場合もあり、ModelState.Values 内の Errors オブジェクトのErrorMessage にエラーメッセージが設定されています。メッセージは複数の場合もあるため、foreachループを利用して、すべてのエラーメッセージを画面に表示する動作を実装しています。

    public PageResult OnPost()
    {
      if (ModelState.IsValid == true)
      {
        MessageText = "処理は成功しました。";
        return Page();
      }
      else
      {
        foreach (ModelStateEntry se in ModelState.Values) {
          foreach (ModelError me in se.Errors) {
            MessageText += me.ErrorMessage;
          }
        }
        return Page();
      }
    }