ASP.NET Core 5 MVC : post model binding complex collection back to controller instantiates vm but without data - collections

Question

I'm trying to post back a complex collection (POCOs) to my controller. The array created by serializeArray() looks good to me (but maybe it is not).
I tried conforming my code in this project to code that works in an ASP.NET Core 5 MVC & EF 6 project I have. Something has changed since then. Can't figure out what I am missing.
Here's my current version of the Ajax call:
$('#btnCreate').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '#Url.Action("CreatePL", "Reports")',
data: JSON.stringify({ glassDemands: $('#plTarget').serializeArray() }),
contentType: 'application/json; charset=UTF-8',
success: function(data) {
},
error: function(xhr) {
}
});
});
Here's a screenshot of the first several lines of data it creates:
This screenshot shows the action in the controller with result from post:
Here are the three classes that make up the view. Microsoft documentation states that
POCOs that do not have parameterless constructors can't be bound.
Code:
public class GlassDemand
{
public GlassDemand()
{
Boxes = new HashSet<Box>();
}
public string bunk { get; set; }
public int sequence { get; set; }
public string tag { get; set; }
public string elevation { get; set; }
[Display(Name = "Glass")]
public string glasstag { get; set; }
[Display(Name = "Needed")]
public int glassqty { get; set; }
// total quantity selected from boxes. should be the sum of all related boxitem.usedqty
[NotMapped]
[Display(Name = "Sel Qty")]
public int pickedqty { get; set; }
[NotMapped]
public ICollection<Box> Boxes { get; set; }
[NotMapped]
public int ItemId { get; set; }
}
public class Box
{
public int BoxId { get; set; }
public string Name { get; set; }
public bool Selected { get; set; }
public string Location { get; set; }
public virtual ICollection<BoxItem> BoxItems { get; set; }
public int MatchedTo { get; set; }
public Box()
{
BoxItems = new HashSet<BoxItem>();
}
}
public class BoxItem
{
public BoxItem()
{
}
public int ItemId { get; set; }
public string Name { get; set; }
[DisplayFormat(DataFormatString = "{0:N0}")]
public decimal Qty { get; set; }
public int BoxId { get; set; }
public int UsedById { get; set; }
[DisplayFormat(DataFormatString = "{0:N0}")]
public decimal UsedQty { get; set; }
// remaining = Qty (box quantity) - sum(UsedQty from all instances)
[DisplayFormat(DataFormatString = "{0:N0}" )]
public decimal Remaining { get; set; }
// navigations
public virtual Box Box { get; set; }
}
And the view model that is sent to the view when it is launched.
public class PickListDemandVM
{
public IEnumerable<GlassDemand> GlassDemands { get; set; }
public PickListDemandVM()
{
GlassDemands = new List<GlassDemand>();
}
}

Answer 1

.serializeArray() is used to post application/x-www-url-formencoded content type data to backend.Change your code like below:
$('#btnCreate').click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '#Url.Action("CreatePL", "Reports")',
data: $('#plTarget').serializeArray() ,
//contentType: 'application/json; charset=UTF-8',
success: function(data) {
},
error: function(xhr) {
}
});
});
Remove [FromBody] in Controller:
[HttpPost]
public ActionResult CreatePL(List<GlassDemand> glassDemands)

Answer 2

I don't understand all the nuances of model bindings. One thing is for sure though, you have to have keys on all tables being posted. With proper keys in place, I can use a view model or a List<> parameter in my controller action. From MS documentation, using a view model is the preferred method.
My POCOs didn't have keys. I ended up using a counter while I built my data on the highest level table, GlassDemand. Then built increasingly more complex keys for each descendent.
I added the following to my classes to hold the values that are dynamically being created for their respective tables.
[Key]
public string Id { get; set; }
I added this line to my display templates
#Html.HiddenFor(model => model.Id)
This is the first two rows look like that is being posted back to the controller now.
My dataset was also too large. I had to add the following attribute to the controller action. Thanks to DAustin's post
[RequestFormLimits(ValueCountLimit = 10000)]
the final jquery that posts back the data:
$('#btnCreate').click(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '#Url.Action("CreatePL", "Reports")',
data: $('#plTarget').serializeArray(),
success: function(data) {
},
error: function(xhr) {
}
});
});
the final action in the controller:
[HttpPost]
[RequestFormLimits(ValueCountLimit = 10000)]
public ActionResult CreatePL(PickListDemandVM vm)
{