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

在ASP.NET Core 3.1 MVC中，可以使用JavaScript和C#的ViewModel来动态添加列表。下面是一个完善且全面的答案：

在ASP.NET Core 3.1 MVC中，可以通过以下步骤使用JavaScript和C#的ViewModel动态添加列表：

创建一个ViewModel类，用于存储列表数据。ViewModel是一个用于在视图和控制器之间传递数据的模型。例如，可以创建一个名为"ListViewModel"的类：

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

在控制器中创建一个动作方法，用于处理视图中的表单提交。在该方法中，可以接收ViewModel的列表数据，并将其存储在一个集合中。例如，可以创建一个名为"AddToList"的动作方法：

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

    return RedirectToAction("Index");
}

在视图中使用JavaScript和C#来动态添加列表项。可以使用JavaScript来监听用户的操作，并通过AJAX请求将数据发送到控制器中。在控制器中，可以将接收到的数据添加到ViewModel的列表中。以下是一个示例视图代码：

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

在上述代码中，通过使用@for循环来遍历ViewModel的列表，并为每个列表项生成相应的HTML元素。当用户点击"Add Item"按钮时，JavaScript代码会动态添加一个新的列表项。当用户点击"Remove"按钮时，JavaScript代码会移除相应的列表项。

请注意，上述代码中使用了jQuery库来简化JavaScript操作。确保在视图中引入了jQuery库。

这是一个使用JavaScript和C#的ViewModel动态添加列表的示例。根据具体的需求，可以根据ViewModel的属性来自定义列表项的输入类型和样式。