时间戳

首页 > 解决方案 > 邮政

c# - 邮政
    和
  • MVC 视图页面中的元素

问题描述

所以我有一个列表，用户可以在其中添加任意数量的项目。换句话说，我有一个<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>元素得到它？

标签： c#postrazorasp.net-core-mvc

解决方案

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

    }
}

我希望这有帮助。

推荐阅读