Razor Pages でチェックボックスの値を取得する

概要

ASP.NET CoreのRazorページでチェックボックスの値を取得するには、BindPropertyの機能を利用します。取得する値のモデルとなるクラスを実装し、ページモデルのメンバ変数としてBindPropety属性を付けて宣言します。

プログラム例

コード

以下のコードを記述します。

Program.cs

namespace SimpleCheckbox
{
  public class Program
  {
    public static void Main(string[] args)
    {
      var builder = WebApplication.CreateBuilder(args);
      builder.Services.AddRazorPages();
      var app = builder.Build();

      app.UseRouting();
      app.MapRazorPages();

      app.Run();
    }
  }
}

Pagesフォルダ内にRazor Pageを作成します。
cshtmlファイルのコードは次の通りです。

Pages\Checkbox.cshtml

@page
@model SimpleCheckbox.Pages.CheckboxModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
}
<html>
  <head>

  </head>
  <body>
    <h1>チェックボックスのデモ</h1>

  <form method="post">
    <div>
      <input id="checkbox1" type="checkbox" asp-for="CheckedValue" /><label for="checkbox1">チェックボックス</label>
    </div>
    <div>
      <input type="submit" value="Button1" />
    </div>
  </form>
  <hr/>
  <div>
    <p>@Model.MessageText</p>
  </div>
  </body>

</html>

Pages\Checkbox.cshtml.cs

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

namespace SimpleCheckbox.Pages
{
  public class CheckboxModel : PageModel
  {
    [BindProperty]
    public bool CheckedValue { get; set; }

    public string MessageText { get; set; }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      if (CheckedValue == true) {
        MessageText = "チェックボックスはチェックされています。";
      }
      else {
        MessageText = "チェックボックスはチェックされていません。";
      }
    }

  }
}

解説

Program.cs

Program.csファイルはRazorPagesアプリケーションの標準的なコードです。詳しくはこちらの記事を参照してください。

/Pages/Checkbox.cshtml

inputタグを利用して、チェックボックスとサブミットボタンをページに配置しています。

タグヘルパーを記述し、asp-for属性が利用できるようにします。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

チェックボックスには asp-for 属性を記述します。値には、参照するモデルクラスのプロパティ名を指定します。今回はページモデルクラスの CheckedValue プロパティの値を設定し、チェックボックスの状態を反映します。

<input id="checkbox1" type="checkbox" asp-for="CheckedValue" />

POSTするためのサブミットボタンを配置します。

<input type="submit" value="Button1" />

ポスト時に同じページにアクセスしますので、その際に表示するメッセージの枠を記述します。

 <p>@Model.MessageText</p>

/Pages/Checkbox.cshtml.cs

チェックボックスのチェック状態を保存するプロパティを宣言します。BindProperty属性をつけます。

 [BindProperty]
  public bool CheckedValue { get; set; }

POST後のページで画面に表示するメッセージを格納するプロパティを宣言します。

  public string MessageText { get; set; }

POSTの動作を実装します。POSTでページを表示した際にCheckedValueプロパティの値を確認し、チェックボックスのチェックの有無のメッセージを MessageText プロパティに代入します。

    public void OnPost()
    {
      if (CheckedValue == true) {
        MessageText = "チェックボックスはチェックされています。";
      }
      else {
        MessageText = "チェックボックスはチェックされていません。";
      }
    }

実行結果

プロジェクトを実行し、(アプリケーションルートURL)/Checkbox のURLにアクセスします。
下図のページが表示されます。
Razor Pages でチェックボックスの値を取得する:画像1

チェックボックスにチェックをつけずに、[Button1]ボタンをクリックし、POSTします。下図のページが表示されます。ページ下部にチェックボックスはチェックされていない旨のメッセージが表示されます。
Razor Pages でチェックボックスの値を取得する:画像2

再度アプリケーションを実行して、(アプリケーションルートURL)/Checkbox のURLにアクセスします。
ページが表示されますので、チェックボックスをクリックしてチェックをつけます。チェック後[Button1]ボタンをクリックし、POSTします。
Razor Pages でチェックボックスの値を取得する:画像3

下図のページが表示されます。チェックボックスにチェックがついている旨のメッセージが表示されます。