如何将可变长度的模型列表传递给方法

Question

我正在尝试创建一个网站，可以将具有多种变体的产品添加到数据库中。

我使用可以填写产品的表格，然后可以添加变体。这些变化是基于另一个模型的。但是，当将这些变体传递给方法时，它不在列表中。如何使它们作为列表传递？

<form id="partialform" asp-action="AddNewProduct" asp-route-Category="Skate" enctype="multipart/form-data" style="display:inline-block;width:100%;" data-ajax="true" data-ajax-update="#AppendProductHere" data-ajax-mode="replace">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="col-md-12" id="appendpartformhere">
        <partial name="AddProductBase" model="new Product()" />

        <div class="col-md-6">
            <partial name="AddCategoryAllBase" model="new CategoryAll()" />

            <div class="form-group">
                <label asp-for="Skate.Use" class="control-label"></label>
                <input asp-for="Skate.Use" class="form-control" id="SkateUse" />
                <span asp-validation-for="Skate.Use" class="text-danger"></span>
            </div>
            //more labels and inputs
        </div>
    </div>
    <partial name="AddVariationSkate" model="new VariationSkate()" />
    <div id="addpartialSkate"></div>
    <div class="form-group">
        <input type="submit" value="Finish" class="btn btn-default" id="FinishAddingVariations" />
    </div>
</form>

单击按钮将插入到上面的部分

    <div class="allSkates">

        <hr />
        <div class="row">
            <div class="col-md-12">

                <partial name="AddProductItemBase" model="new ProductItems()" />
                <div class="col-md-6">

                    <div class="form-group">
                        <label asp-for="EANCode" class="control-label"></label>
                        <input asp-for="EANCode" class="form-control VariationsOnProduct">
                    </div>
                    <div class="form-group">
                        <label asp-for="Size" class="control-label"></label>
                        <input asp-for="Size" class="form-control" />
                        <span asp-validation-for="Size" class="text-danger"></span>
                    </div>
                </div>
            </div>

                <div class="form-group">
                    <button type="button" name="name" value="Skate" class="addItem">add variation</button>
                </div>
        <div></div>


        </div>

    </div>

我正在尝试打电话的方法

public ActionResult AddNewProduct(ListSkates skatelist, string Category, Product NewProduct, CategoryAll NewAll)

我正在尝试用滑板手填充的类，但productitem和variantkate保持为空，滑板确实被填充

public class ListSkates
    {
        public CategorySkate Skate { get; set; }
        public IList<ProductItems> productitem { get; set; }
        public IList<VariationSkate> VariationSkates { get; set; }
    }

Answer 1

[通常，当VariationSkates[N].EANCode是索引时，您的输入需要命名为：N。您可以通过多种方式手动执行此操作，但这是一个巨大的痛苦，并且容易出错。最好的选择是使用支持双向模型绑定的客户端库，例如Angular或Vue。

[通常，您将为每个VariationSkate实例（即您的表单字段）显示HTML的客户端模板，然后将VariationSkates的列表绑定为JavaScript对象）到使用此模板的重复块。然后，客户端库将管理HTML的索引编制和插入/删除。

确切的方法取决于所使用的客户端库，通常，深入的指南远远超出了此处的Stack Overflow范围。您需要进行自己的研究，选择一个图书馆，并查阅该图书馆的文档以及其他在线资源。尝试解决方案后，如果遇到问题，可以提出一个更具体的问题。