RazorPagesでフォームの入力要素を配列プロパティにバインドする - ASP.NET Core

フォームの入力フィールドの入力内容を配列プロパティにバインドするコードを紹介します。

概要

こちらの記事では、入力フォームのテキストボックスの値をプロパティにバインドするコードを紹介しました。入力フォームの入力要素が少ないうちは紹介した方法で問題ありませんが、入力フィールドの数が多い場合は、実装や扱いが不便になります。
この記事では入力フィールドの内容を配列プロパティにバインドするコードを紹介します。

プログラム例

コード

ASP.NET Coreアプリケーションを作成し、下記のコードを記述します。

/Pages/ArrayBindProperty01.cshtml

@page
@model BindPropertyArray.Pages.ArrayBindProperty01Model
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 
@{
}
<html>
  <head></head>
  <body>
    <h3>配列のBindPropertyのデモ</h3>
    <form method="post">
      <input type="text" asp-for="values[0]" /><br/>
      <input type="text" asp-for="values[1]" /><br/>
      <input type="text" asp-for="values[2]" /><br/>
      <input type="text" asp-for="values[3]" /><br/>
      <input type="text" asp-for="values[4]" /><br/>
      <input type="text" asp-for="values[5]" /><br/>
      <input type="submit" value="Post" />
    </form>

    <hr/>
    <p>@Model.outtext[0]</p>
    <p>@Model.outtext[1]</p>
    <p>@Model.outtext[2]</p>
    <p>@Model.outtext[3]</p>
    <p>@Model.outtext[4]</p>
    <p>@Model.outtext[5]</p>

  </body>
</html>

/Pages/ArrayBindProperty01.cshtml.cs

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

namespace BindPropertyArray.Pages
{
  public class ArrayBindProperty01Model : PageModel
  {
    [BindProperty]
    public string[] values { get; set; }

    public string[] outtext;

    public ArrayBindProperty01Model()
    {
      values = new string[6];
      outtext = new string[6];
    }

    public void OnGet()
    {
    }

    public void OnPost()
    {
      outtext[0] = values[0];
      outtext[1] = values[1];
      outtext[2] = values[2];
      outtext[3] = values[3];
      outtext[4] = values[4];
      outtext[5] = values[5];
    }

  }
}

Program.cs

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

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

解説

RazorPageのフォームのコードが下記です。asp-for属性を記述し、添え字をつけて配列プロパティを指定しています。

    <form method="post">
      <input type="text" asp-for="values[0]" /><br/>
      <input type="text" asp-for="values[1]" /><br/>
      <input type="text" asp-for="values[2]" /><br/>
      <input type="text" asp-for="values[3]" /><br/>
      <input type="text" asp-for="values[4]" /><br/>
      <input type="text" asp-for="values[5]" /><br/>
      <input type="submit" value="Post" />
    </form>

指定されているプロパティはページモデルクラスに実装されています。

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

プロパティの配列の作成はページモデルクラスのコンストラクタで実行しています。

    public ArrayBindProperty01Model()
    {
      values = new string[6];
      outtext = new string[6];
    }

入力した値の受け取りは、サブミットボタンが押された際に呼び出される OnPostメソッド内で処理します。
バインドされたプロパティの値をメンバ変数に代入しています。

    public void OnPost()
    {
      outtext[0] = values[0];
      outtext[1] = values[1];
      outtext[2] = values[2];
      outtext[3] = values[3];
      outtext[4] = values[4];
      outtext[5] = values[5];
    }

代入したメンバ変数の値をページ内に表示します。

    <p>@Model.outtext[0]</p>
    <p>@Model.outtext[1]</p>
    <p>@Model.outtext[2]</p>
    <p>@Model.outtext[3]</p>
    <p>@Model.outtext[4]</p>
    <p>@Model.outtext[5]</p>