Posting a List<Object> payload to a razor page

user_14745389 0
Viewed 559

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" class="text-danger"></div>
...
<div class="form-group" id="mergeList"></div> <!-- Merge List -->
<div class="form-group">
<input type="submit" value="Preview Merge" id="prevMerge" class="btn btn-primary" />
</div>
</form>

Javascript:

// Cleanup previous imports Html
$('#mergeList').remove();
// Create the element
$('#CleanupMergeForm').append('<div class="form-group" 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().

razor-pages asp.net-core
1 Answers

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
}
user_56407370
Related