Razor Pages でBindPropetyを利用して、チェックボックスの値をPOST時に取得するコードを紹介します。
概要
ASP.NET CoreのRazorページでチェックボックスの値を取得するには、BindPropertyの機能を利用します。
取得する値のモデルとなるクラスを実装し、ページモデルのメンバ変数としてBindPropety属性を付けて宣言します。
プログラム例
コード
以下のコードを記述します。
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ファイルのコードは次の通りです。
@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>
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にアクセスします。
下図のページが表示されます。
チェックボックスにチェックをつけずに、[Button1]ボタンをクリックし、POSTします。下図のページが表示されます。
ページ下部にチェックボックスはチェックされていない旨のメッセージが表示されます。
再度アプリケーションを実行して、
(アプリケーションルートURL)/Checkbox
のURLにアクセスします。
ページが表示されますので、チェックボックスをクリックしてチェックをつけます。チェック後[Button1]ボタンをクリックし、POSTします。
下図のページが表示されます。チェックボックスにチェックがついている旨のメッセージが表示されます。
Razor Pagesでチェックボックスのチェック状態を取得できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-06-26
作成日: 2024-06-26