使用MVC视图页面中的<li>元素POST <ul>

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

    }
}

我希望这有帮助.