将 List<Object> 负载发布到剃刀页面

Question

我有一把剃须刀，在我要绑定到列表的页面上：

[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; }
}

我在 OnGet 页面上将列表初始化为一个空对象：

public IActionResult OnGet()
{
    MergeList = new(); // Initialize
    return Page();
}

我的视图包含隐藏输入以获取此对象：

<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 页面控制器

public IActionResult OnPost()
{
    if(MergeList !=null)
        Console.WriteLine("Merge Size: " + MergeList.Count); // Always 0
    return Page();
}

示例.data()对象

{itemName: '"2"', itemId: 'e7c6e858-b5db-44ab-9ca2-df269087c24b', itemCount: 1, createdDate: '2022-03-08T15:13:52.39', modifiedDate: null}

我面临的问题是我似乎无法从发布的表单中获取数据。我可以看到 html 中的数据作为 MergeList 的隐藏输入，但数组计数在 OnPost().

中始终为 0

Answer 1

为了绑定列表或数组，输入字段的名称属性应该是MergeList[index].PropertyName。 index 必须以 0 开头才能被绑定。

您需要像下面的代码一样分隔输入字段。 ItemId 和 ItemName 必须有自己的输入字段。

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
}

将 List<Object> 负载发布到剃刀页面

Posting a List<Object> payload to a razor page

asp.net-core

razor-pages