c# - 来自 MVC View 页面的带有 <li> 元素的 POST <ul>

Question

所以我有一个列表，用户可以在其中添加任意数量的项目。换句话说，我有一个 <ul>和可变长度 <li>元素。
可变长度 <li> elements 表示，用户添加 <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);
}

我的 Controller 方法 ( 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 不是可提交的表单元素。您可以尝试以下操作。

我不确定您的 View 模型是什么样的，但它看起来像是一个字符串值列表？那么它在您的 View 模型中将如下所示:

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) {

    }
}

希望对您有所帮助。