asp.net-core-mvc - ASP.NET Core 模型绑定(bind)未知长度的集合

Question

我正在尝试弄清楚如何将集合建模到 asp.net core 中的模型属性。我知道可以做到这一点的方法是包含字段，如下所示:

<input type="hidden" asp-for="items[0].Id" />
<input type="hidden" asp-for="items[0].Name" />
<input type="hidden" asp-for="items[1].Id" />
<input type="hidden" asp-for="items[1].Name" />

但是，如果您想允许用户添加其他项目和/或删除其他项目，您该怎么办？在这种情况下，我使用 javascript 在客户端添加这些项目，它们可能会在末尾添加一个新项目并从中间删除一个项目，这可能会导致如下所示的结果:

<input type="hidden" asp-for="items[1].Id" />
<input type="hidden" asp-for="items[1].Name" />
<input type="hidden" asp-for="items[3].Id" />
<input type="hidden" asp-for="items[3].Name" />

ASP.NET Cores 模型绑定(bind)不会将集合绑定(bind)到模型属性(我猜是因为索引未对齐)。

有什么办法可以实现这个功能吗？我试图避免编写一些东西来“重新标记”这些字段的索引。

更新

对于其他遇到此问题的人，我将所有元素添加到名称为 0 的容器内的页面，如下所示:

<div class="some-group">
    <input type="hidden" class="id" asp-for="items[0].Id" />
    <input type="hidden" class="name" asp-for="items[0].Name" />
    <input type="hidden" class="id" asp-for="items[0].Id" />
    <input type="hidden" class="name" asp-for="items[0].Name" />
</div>

然后，我将以下内容添加到循环中，并在提交表单时重命名它们。

$('#frmSomething').submit(function (e) {
    var selectors = $('.some-group');
    var id = 0;

    selectors.each(function (i, el) {
        var idItem = $(el).find('input.id');
        idItem.prop('name', idItem.prop('name').replace('0', id));

        var nameItem = $(el).find('input.name');
        nameItem.prop('name', nameItem.prop('name').replace('0', id));

        id++;
    });
});

只有在提交表单后，才会对项目进行顺序编号，这意味着用户可以添加和删除他们喜欢的项目的任意组合，而不会影响向 Controller 提交值。

我确信有人可以想出更好的方法来解决这个问题(我不是 javascript 专家)，但这对我有用，并且可能对其他人有帮助。

更新2

下面@LukasKubris 提供的答案是正确的，它比编写映射函数更容易。

Answer 1

您还可以绑定(bind)非顺序索引。它只需要名为 Index 的额外字段。所以不需要有一些辅助 JS 函数。

<form method="POST">

    <input type="hidden" name="items.Index" value="7466c69d-4575-4636-9151-f92edd9c25b7" />
    <input type="text" name="items[7466c69d-4575-4636-9151-f92edd9c25b7].Key" value="key1" />
    <input type="text" name="items[7466c69d-4575-4636-9151-f92edd9c25b7].Value" value="value1" />

    <input type="hidden" name="items.Index" value="7466c69d-4575-4636-9151-f92edd9c25b8" />
    <input type="text" name="items[7466c69d-4575-4636-9151-f92edd9c25b8].Key" value="key2" />
    <input type="text" name="items[7466c69d-4575-4636-9151-f92edd9c25b8].Value" value="value2" />

    <input type="submit"/>
</form>

在OnPost处理程序中的使用

public void OnPost(List<Item> items)
{
}