I have a razor and on the page I'm binding to a list:
[BindProperty]
public List<CleanupToolMerge> MergeList { get; set; }
CleanupToolMerge Class:
public partial class CleanupToolMerge
{
public string ItemName { get; set; }
public Guid ItemId { get; set; }
public int ItemCount { get; set; }
public DateTime CreatedDate { get; set; }
public DateTime? ModifiedDate { get; set; }
}
I initialize the list an empty object on the OnGet
page:
public IActionResult OnGet()
{
MergeList = new(); // Initialize
return Page();
}
My view contains hidden inputs in order to get this object:
<form method="post" id="CleanupMergeForm">
<div asp-validation-summary="ModelOnly" ></div>
...
<div id="mergeList"></div> <!-- Merge List -->
<div >
<input type="submit" value="Preview Merge" id="prevMerge" />
</div>
</form>
Javascript:
// Cleanup previous imports Html
$('#mergeList').remove();
// Create the element
$('#CleanupMergeForm').append('<div id="mergeList"></div>');
let _data = table.rows('.selected').data(); // All selected rows to merge
let _length = _data.length;
let _list = [];
console.log('Importing ' _length ' row(s)')
// Build array for List<CleanupToolMerge>
for (var i = 0; i < _length; i ) {
_list.push(_data[i]);
console.log(_data[i]);
$("<input>").attr({
name: "MergeList", // <------------ MergeList is created here
id: "MergeList_" i, // <--------- Each item to be added to the array
type: "hidden",
value: $(_data[i]).serialize()
}).appendTo("#mergeList");
}
console.log('Created' _length ' rows to merge');
Razor page controller
public IActionResult OnPost()
{
if(MergeList !=null)
Console.WriteLine("Merge Size: " MergeList.Count); // Always 0
return Page();
}
Example .data()
object
{itemName: '"2"', itemId: 'e7c6e858-b5db-44ab-9ca2-df269087c24b', itemCount: 1, createdDate: '2022-03-08T15:13:52.39', modifiedDate: null}
The issue I am facing is I cannot seem to get the data from the posted form. I can see the data in the html as hidden inputs for MergeList
but the array count is always 0 inside of OnPost()
.
CodePudding user response:
In order to bind lists or arrays, the name attribute of the input field should be MergeList[index].PropertyName
. index
should start with 0 in order to be bound.
You need to separate the input fields like in the code below. ItemId
and ItemName
must have their own input field.
for (var i = 0; i < _length; i ) {
...
$("<input>").attr({
name: "MergeList[i].ItemId", // ItemId
id: "MergeList_" i,
type: "hidden",
value: _data[i].ItemId // ItemId
}).appendTo("#mergeList");
$("<input>").attr({
name: "MergeList[i].ItemName", // ItemName
id: "MergeList_" i,
type: "hidden",
value: _data[i].ItemName // ItemName
}).appendTo("#mergeList");
// add the properties item count, etc
}