Asp.Net Core Razor Pages - Binding and saving a list of objects - razor-pages

Question

I have to get the photographs for a list of people. How do I generate the <input type="file" asp-for="#person.Photo"> controls in the cshtml page? Right now all the controls have the same name ("person_Photo"). Also how do I access this property in OnPost?
Sample code below for clarity:
Person class
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public IFormFile Photo { get; set; }
}
Create.cshtml.cs
public class CreateModel : PageModel
{
[BindProperty]
public List<Person> People {get; set;}
public async Task<IActionResult> OnGetAsync(int applicationId)
{
var applicants = repo.GetApplicants(applicationId);
People = applicants.Select(a => new Person(){Id=a.Id,Name=a.Name,Photo=null}).ToList();
}
public async Task<IActionResult> OnPostAsync()
{
//People is null below. For example OnGet fills People with 3 Person.
foreach (var person in People)
{
//I need to save the Photo.
//How do I access the IFormFile Photo?
//All the file inputs have the same name when I inspect the HTML.
}
}
}
Create.cshtml
All the file controls have the same name ie. person_Photo
<form method="post" enctype="multipart/form-data">
#foreach (var person in Model.People)
{
<input type="hidden" asp-for="#person.Id" />
<input type="hidden" asp-for="#person.Name" />
<input type="file" asp-for="#person.Photo"/>
}
<button type="submit"/>
</form>

Answer 1

In your OnPost method, you can access the uploaded files by using the
IFormFile property of each person.
The name attribute in the HTML should match the property name of the Person class.
You can use the Request.Form.Files collection to access the uploaded files:
public async Task<IActionResult> OnPostAsync()
{
for (int i = 0; i < People.Count; i++)
{
People[i].Photo = Request.Form.Files[$"People[{i}].Photo"];
// Save the photo
}
}