Question

所以我有一个列表，使用可以在其中添加任意数量的项目。换句话说，我有一个<ul>和可变长度的<li>个元素。
可变长度<li>元素意味着，用户在运行时添加<li>元素，完成后将提交表单。所以我不知道有多少<li>个元素。
像这样：

<form asp-controller="MyController" asp-action="AddList" method="post">
    <ul id="myUL">
        <li>item1</li>
        <li>item2</li>
        /*...*/
        <li>itemN</li>
    </ul>
    <button type="submit" class="btn btn-default">New List</button>
</form>

如果用户单击按钮，我会使用<li>动态添加JavaScript元素，例如：

function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    document.getElementById("myUL").appendChild(li);
}

我的控制器的方法（AddList）如下：

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<IActionResult> NewShoppingList(object list)
{
    // I don't know how to accept that list

}

但是这样，我的参数list是null。如何获得带有一些<ul>元素的<li>？

Answer 1

ul和li不是可提交的表单元素。您可以尝试以下操作。

我不确定您的视图模型是什么样子，但是似乎是字符串值列表？因此，在您的视图模型中它将如下所示：

public class YourViewModel
{
     public List<string> Items { get; set; }
}

在您看来，请尝试以下操作：

<ul id="myUL">
    <li>item1</li>
    <li>item2</li>
    /*...*/
    <li>itemN</li>
</ul>


function addHidden(theLi, key, value) {
    // Create a hidden input element, and append it to the li:
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = key;'name-as-seen-at-the-server';
    input.value = value;
    theLi.appendChild(input);
}
function newElement() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    addHidden(li, 'your-model-propertyName' + li-Count+1, inputValue );
    document.getElementById("myUL").appendChild(li);
}

发布时，这些项目仍应在列表中。

[HttpPost]
[AllowAnonymous]
//[ValidateAntiForgeryToken]
public async Task<IActionResult> NewShoppingList(List<string> list)
{
    // I don't know how to accept that list

}

如果您不喜欢为每个li添加隐藏字段，则可以获取所有li项目并将其与Ajax一起发送。

像这样：

function sendData() {
     var items = [];
        $("#myUL li").map(function () {
            items.push(this.innerText);
        });

        $.ajax({
            type: "POST",
            data: {
                list:  items
            },
            url: "/Home/NewShoppingList",
            success: function (res) {

    }
}

我希望这会有所帮助。

Answer 2

您应该避免发布html，毕竟您可能需要解析它，然后保存到db等。正如Jeremy Thomson建议使用一些客户端库-jQuery，Angular或您想要的任何东西来处理项目使用Ajax。您可以在每个用户输入中发布它们，或将它们保留在mvc模型，javascript对象等中，然后立即发布。

示例只是为了了解这个想法： MVC - Binding dynamically added controls to a List<T> in a Model

通过MVC视图页面使用<li>元素进行POST <ul>

2 个答案: