Trying to bind a complex object that consists of nested lists of objects poses a challenge. While the data binds to the page successfully with pre-populated content, issues arise when posting the form to the handler method.
I can post and bind the parent object (ObjectA) along with its data-type properties and its list of complex objects (ObjectB). However, I struggle to bind the list of objects (ObjectC) within ObjectB.
To simplify, here's an example of what I'm trying to achieve:
Classes and handler method structure:
// Classes
public class ObjectA
{
public int Id { get; set; }
public IList<ObjectB> ObjectBList { get; set; }
}
public class ObjectB
{
public int Id { get; set; }
public IList<ObjectC> ObjectCList { get; set; }
}
public class ObjectC
{
public int Id { get; set; }
public string Name { get; set; }
}
// Handler method
public async Task<IActionResult> OnPostDoSomethingAsync(ObjectA objectA)
{
// Do Something
}
Pseudo-code in .cshtml file using ClassA as the page model:
For simplicity, only hidden input fields are used in this example:
<form id="myFormId">
<input type="hidden" asp-for="@Model.Id" />
@for (var i; i < @Model.ObjectBList.Count(); i++)
{
var objectCList = @Model.ObjectBList[i].ObjectCList.Where(z => z.Id < 4);
<input type="hidden" asp-for="@Model.ObjectBList[i].Id" name="ObjectBList[@i].Id" />
@for (var z; z < objectCList.Count(); z++)
{
<input type="hidden" asp-for="objectCList[z].Id" name="ObjectBList[@i].ObjectCList[@z].Id" />
}
</form>
The goal is to submit the form via both a submit button and Ajax. Testing has been done using an Ajax post like the one below:
$.post('/Page?handler=DoSomething', $(#myFormId).serialize(), function () { alert('success'); });
When the post action is executed with the code provided above, the payload displays content similar to this:
Id: 1
ObjectB[0].Id: 1
ObjectB[0].ObjectC[0].Id: 1
ObjectB[0].ObjectC[1].Id: 2
ObjectB[1].Id: 2
ObjectB[1].ObjectC[0].Id: 1
ObjectB[1].ObjectC[1].Id: 2
However, the issue arises when the handler receives null for the "objectA" parameter due to binding failure. It seems that the content received does not match the expected object model.
If I remove the CSHTML code related to binding ObjectC and only bind ObjectA and ObjectB, the payload changes to:
Id: 1
ObjectB[0].Id: 1
ObjectB[1].Id: 2
In this case, everything works correctly as ObjectA is populated as expected. It seems that introducing ObjectC breaks the binding process.
It is likely that there is an issue with how I am naming the input fields for ObjectC causing the incorrect payload. Any advice on the correct syntax for this scenario would be helpful. If my approach is sound, then there might be a typo or similar issue that needs to be addressed.