Razor 页面，将所有复选框作为值列表返回

Question

I want my checkboxes in a form to return as a list of all the values for selected checkboxes

foreach (string url in ListOfPhotoURLs)
    {
        <div class="form-check form-check-inline">
            <input asp-for="Input.ChosenPhotos" class="form-check-input" type="checkbox" id="PhotosChosen" value="@url">
            <img src="@url" alt="photo from url @url" width="250">
            <span class="text-danger" asp-validation-for="Input.ChosenPhotos"></span>
        </div>
    }

Where Input.ChosenPhotos is type List<string> and when the form is submitted I want my list to be populated with all of the values ( url ) that correspond with a checked checkbox

When I run I get an error that basically says checkboxes can only return a bool or string. Not a list of strings or bools.

Problem is my list is of inderterminet length so I cant have an input model that has an individual property for each checkbox.

I'm not sure what the optimal solution is here?

Im using Razor Pages btw

Answer 1

As the error message said, if you use tag helper in checkbox, it only allows bool or string type property. For your scenario, you could change asp-for to name like below:

@foreach (string url in ListOfPhotoURLs)
{
    <div class="form-check form-check-inline">
        <input name="Input.ChosenPhotos" class="form-check-input" type="checkbox" id="PhotosChosen" value="@url">
        <img src="@url" alt="photo from url @url" width="250">
        <span class="text-danger" asp-validation-for="Input.ChosenPhotos"></span>
    </div>
}

Backend code:

public class IndexModel : PageModel
{
    [BindProperty]
    public InputModel Input { get; set; }
    public class InputModel
    {
        public string[] ChosenPhotos { get; set; }
    }
    public void OnPost()
    {
        //do your stuff...
    }
}

Answer 2

So I think Rena's answer would work, but this is the solution I found and have just implemented (before Rena's answer was posted)

https://mycodingtips.com/2021/3/23/code-snippet-to-create-a-checkboxlist-in-asp-net-core-razor-page-application

https://github.com/Melvinmz/chkBoxSnippet