Model Binding with List of Objects Not Working - entity-framework

Question

Model binding a List of objects is not working as expected.
When entering the OnPost method the UploadTransactions List is not null, but an empty list.
I have followed the instructions outlined here
I have been trying to figure this out for days now, I can't seem to wrap my head around why this is not working as expected.
Even some advice on how to debug what is being posted and why it is failing to bind to the property would be helpful. I can bind any other data as expected, but when I try to use a list of objects I am unable to get it to work.
public class UploadTransaction
{
public UploadTransaction()
{
}
public string Date { get; set; }
public string Amount { get; set; }
public string Type { get; set; }
public string Description { get; set; }
public string Location { get; set; }
public string State { get; set; }
public string TransId { get; set; }
}
public class ViewUploadModel : PageModel
{
public BankscrapeDbContext BankscrapeDbContext { get; }
[BindProperty]
public List<UploadTransaction> UploadTransactions { get; set; }
public List<Transaction> Transactions { get; set; }
public ViewUploadModel(BankscrapeDbContext bankscrapeDbContext)
{
BankscrapeDbContext = bankscrapeDbContext;
}
public void OnGet()
{
Transactions = JsonConvert.DeserializeObject<List<Transaction>>(this.HttpContext.Session.GetString("UploadTransactions"));
}
public IActionResult OnPost()
{
}
}
<form method="post">
<div clss="container">
<table class="table table-striped">
<thead>
<tr>
<td>Date</td>
<td>Amount</td>
<td>Type</td>
<td>Description</td>
<td>Location</td>
<td>State</td>
<td>Transaction ID</td>
</tr>
</thead>
<tbody>
#for (var i = 0; i < Model.Transactions.Count; i++)
{
<tr>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].Date" value="#Model.Transactions[i].Date" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].Amount" value="#Model.Transactions[i].Amount" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].Type" value="#Model.Transactions[i].Type" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].Description" value="#Model.Transactions[i].Description" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].Location" value="#Model.Transactions[i].Location" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].State" value="#Model.Transactions[i].State" /></td>
<td><input class="form-control" type="text" aps-for="UploadTransactions[#i].TransId" value="#Model.Transactions[i].TransId" /></td>
</tr>
}
</tbody>
</table>
</div>
<div class="container">
<button class="btn btn-primary mt-3" type="submit" style="min-width:100%" id="button-submit">Upload</button>
</div>
</form>

Answer 1

Try to change aps-for="UploadTransactions[#i].xxx" with name="UploadTransactions[#i].xxx:
#for (var i = 0; i < Model.Transactions.Count; i++)
{
<tr>
<td><input class="form-control" type="text" name="UploadTransactions[#i].Date" value="#Model.Transactions[i].Date" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].Amount" value="#Model.Transactions[i].Amount" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].Type" value="#Model.Transactions[i].Type" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].Description" value="#Model.Transactions[i].Description" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].Location" value="#Model.Transactions[i].Location" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].State" value="#Model.Transactions[i].State" /></td>
<td><input class="form-control" type="text" name="UploadTransactions[#i].TransId" value="#Model.Transactions[i].TransId" /></td>
</tr>
}