如何在ASP.NET Core3.1MVC中使用JavaScript和C#使用ViewModel动态添加列表

public class ListViewModel
{
    public string ItemName { get; set; }
    public int Quantity { get; set; }
}

[HttpPost]
public IActionResult AddToList(List<ListViewModel> items)
{
    // 在这里处理接收到的列表数据
    // 可以将数据存储在数据库中或执行其他操作

    return RedirectToAction("Index");
}

@model List<ListViewModel>

<form id="addItemForm" method="post" action="/ControllerName/AddToList">
    <div id="itemContainer">
        @for (int i = 0; i < Model.Count; i++)
        {
            <div class="item">
                <input type="text" name="items[@i].ItemName" value="@Model[i].ItemName" />
                <input type="number" name="items[@i].Quantity" value="@Model[i].Quantity" />
                <button type="button" class="removeItem">Remove</button>
            </div>
        }
    </div>
    <button type="button" id="addItem">Add Item</button>
    <button type="submit">Submit</button>
</form>

<script>
    $(document).ready(function () {
        // 添加新的列表项
        $("#addItem").click(function () {
            var newItem = '<div class="item">' +
                '<input type="text" name="items[].ItemName" />' +
                '<input type="number" name="items[].Quantity" />' +
                '<button type="button" class="removeItem">Remove</button>' +
                '</div>';
            $("#itemContainer").append(newItem);
        });

        // 移除列表项
        $(document).on("click", ".removeItem", function () {
            $(this).closest(".item").remove();
        });
    });
</script>