ASP.Net Core MVC 中的 POST 对象列表

Question

我无法将对象列表（计数未知）从视图发布到控制器。我解决了一些问题，这里是我用 JS 做的事情。我有一个用于添加 2 个输入的按钮，在 2 个输入的那一行旁边有一个删除按钮。每个输入都有模型的名称，例如 Product.Features[0].TitleName 和 Product.Features[0].Value

一切正常，但问题是，如果我们有 3 个输入，并且用户单击索引 1 的删除按钮，则在发布表单后，仅索引 0 将发布并忽略索引 2！

我怎样才能做一些事情来获得用户想要的输入数量，并且能够以任何顺序删除。

我的模型是一个产品模型，有很多东西，并且有 ProductFeatures 模型列表：

public class ProductFeature
{
    public int Id { get; set; }
    public required string TitleName { get; set; }
    public required string Value { get; set; }
}

我的 HTML :

<div class="accordion-body w-50">
    <div id="features" class="form-group">
    </div>
    <input id="cmdAdd1" class="btn btn-primary" type="button" value="افزودن ویژگی" />
</div>

这是 JS：

var itemCount = 0;
const removedItems = [];

$('#cmdAdd1').click(function () { addNewFeature(); });

function addNewFeature() {
// Add new line with text field and button
    if (removedItems.length == 0) {
        var newItem = ' <div id="item' + itemCount + '" class="input-group mb-2">';
        newItem += '<input id="title' + itemCount + '" name="Product.ProductFeatures[' + itemCount + '].TitleName" placeholder="عنوان" class="form-control" type="text"/>';
        newItem += '<input id="value' + itemCount + '" name="Product.ProductFeatures[' + itemCount + '].Value" placeholder="مقدار" class="form-control" type="text"/>';
        newItem += '<input id="cmdAdd' + itemCount + '" type="button" class="btn btn-danger" value="حذف ویژگی"></input>';
        newItem += "</div>";

        $('#features').append(newItem);
        var thisItem = itemCount;
        $('#cmdAdd' + itemCount).click(function () { removeItem(thisItem); });
        itemCount++;
    }
    else {
        var id = removedItems[0];
        var newItem = ' <div id="item' + id + '" class="input-group mb-2">';
        newItem += '<input id="title' + id + '" name="Product.ProductFeatures[' + id + '].TitleName" placeholder="عنوان" class="form-control" type="text"/>';
        newItem += '<input id="value' + id + '" name="Product.ProductFeatures[' + id + '].Value" placeholder="مقدار" class="form-control" type="text"/>';
        newItem += '<input id="cmdAdd' + id + '" type="button" class="btn btn-danger" value="حذف ویژگی"></input>';
        newItem += "</div>";

        $('#features').append(newItem);
        thisItem = id;
        $('#cmdAdd' + id).click(function () { removeItem(thisItem); });
        removedItems.splice(0, 1);
    }
}

function removeItem(i) {
    $('#item' + i).remove();
    removedItems.push(i);
}

这是图像示例：

谢谢你

Answer 1

您面临的问题似乎与在 JavaScript 代码中动态添加和删除项目时如何索引项目有关。删除项目时，数组“removedItems”会跟踪删除的索引，但不会重新排列现有项目的索引，从而导致表单数据中的索引与页面上的实际项目不匹配。

解决此问题的一种方法是在删除项目时重新索引输入字段的名称。

var itemCount = 0;

$('#cmdAdd1').click(function () { addNewFeature(); });

function addNewFeature() {
    var newItem = '<div id="item' + itemCount + '" class="input-group mb-2">';
    newItem += '<input id="title' + itemCount + '" name="Product.ProductFeatures[' + itemCount + '].TitleName" placeholder="عنوان" class="form-control" type="text"/>';
    newItem += '<input id="value' + itemCount + '" name="Product.ProductFeatures[' + itemCount + '].Value" placeholder="مقدار" class="form-control" type="text"/>';
    newItem += '<input id="cmdAdd' + itemCount + '" type="button" class="btn btn-danger" value="حذف ویژگی"></input>';
    newItem += '</div>';

    $('#features').append(newItem);
    var thisItem = itemCount;
    $('#cmdAdd' + itemCount).click(function () { removeItem(thisItem); });
    itemCount++;
}

function removeItem(i) {
    $('#item' + i).remove();
    // Re-index the remaining items
    reIndexItems();
}

function reIndexItems() {
    var items = $('#features').children();
    items.each(function (index) {
        var id = 'item' + index;
        $(this).attr('id', id);
        $(this).find('input[type=text]').each(function () {
            var inputName = 'Product.ProductFeatures[' + index + '].' + $(this).attr('name').split('.')[2];
            $(this).attr('name', inputName);
        });
        $(this).find('input[type=button]').attr('onclick', 'removeItem(' + index + ')');
    });
}

每当删除一项时，此代码应动态调整剩余项目的索引，确保提交表单时所有索引正确对齐。