未知长度的ASP.NET核心模型绑定集合 [英] ASP.NET Core Model Bind Collection of Unknown Length

问题描述

我正在尝试弄清如何将集合模型绑定到asp.net核心中的模型属性.我知道可以这样做的方法是按如下方式包含字段:

I'm trying to work out how to model bind a collection to a model property within asp.net core. I understand that the way this can be done is to include fields as so:

<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在客户端添加这些项目，并且它们可能在末尾添加一个新项目，并从中间删除一个项目，这可能会导致如下所示:

However what do you do if you want to allow the user to add additional items and/or remove others. In this case I am adding these items client side using javascript and they might add a new item to the end and delete one from the middle, which could result in something like the following:

<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模型绑定然后不将集合绑定到model属性(我想是因为索引未对齐).

ASP.NET Cores model binding doesn't then bind the collection to the model property (I presume because the indexes aren't aligned).

有什么办法可以使这项工作成功吗?我试图避免写一些东西来重新标记"这些字段的索引.

Is there any way to make this work? I'm trying to avoid having to write something to "relabel" the indexes of these fields.

更新

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

For anyone else stumbling across this I add all of the elements to the page inside a container with the name of 0 like this:

<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>

然后我添加了以下内容以循环并在提交表单时重命名它们.

I then added the following to loop and rename them when the form was submitted.

$('#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++;
    });
});

这仅在提交表单后才对项目进行顺序编号，这意味着用户可以在不影响向控制器提交值的情况下添加和删除他们喜欢的项目的任何组合.

This sequentially numbers the items only once a form is submitted meaning users can add and remove any combination of items they like without effecting the submission of values to the controller.

我确定有人可以想出一种更好的方法来解决此问题(我不是JavaScript专家)，但这对我有用，可能会对其他人有所帮助.

I'm sure someone could come up with a better way of solving this (I'm no javascript expert) but this works for me and might help someone else.

更新2

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

Answer provided below from @LukasKubris is correct, it's easier than writing a mapping function.

推荐答案

您还可以绑定非顺序索引.它只需要一个名为 Index 的额外字段.因此，不需要一些辅助JS函数.

You can also bind Non-Sequential Indices. It just requires extra field called Index. So there is no need to have some helper JS functions.

<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)
{
}

这篇关于未知长度的ASP.NET核心模型绑定集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！