What is the recommended pattern for binding an array-type property to a form in ASP.NET Core Razor?

Question

Hi,

I am using ASP.NET Core 8 Razor, and I am trying to figure out what has to be done to transmit a property of type int[] to/from a form as a hidden field. Scalar values are pretty easy (just put BindProperty on a property and use a hidden input field to capture it in the form), but does something like this exist for arrays? Also, I need to support scenarios where it is not known how many elements are going to be passed inside the array.

Answer 1

The common programming pattern is taking advantage of model binding where the input name (html) contains an index.

https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-8.0#collections

@page
@model RazorPagesDemo.Pages.BindCollectionExModel
@{
    ViewData["Title"] = "Model Bind a Collection";
}
<div>
    <form method="post">
        @for (int i = 0; i < Model.MyArray.Length; i++)
        {
            <input type="hidden" asp-for="MyArray[i]" />
        }
        <input type="submit" value="submit" />
    </form>
</div>
<div>
    <ul>
        @foreach (int item in Model.SubmittedValues)
        {
            <li>
                @item
            </li>
        }
    </ul>
</div>

    public class BindCollectionExModel : PageModel
    {
        public void OnGet()
        {
            //Populate myArray
            MyArray = new int[] { 1, 2, 3, 4, 5 };
        }
        public void OnPost() 
        {
            SubmittedValues.AddRange(MyArray);
        }
        [BindProperty]
        public int[] MyArray { get; set; }
        public List<int> SubmittedValues { get; set; } = new List<int>();
    }