代码之家 › 专栏 › 技术社区 › koviroli

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

asp.net-core-mvc razor post c#

koviroli · 技术社区 · 7 年前

所以我有一个列表,用户可以添加任意数量的项目。换句话说,我有一个 <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> 元素?

2 回复 | 直到 6 年前

Hossein 7 年前

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

    }
}

我希望这能有帮助。

Selvirrr 7 年前

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

举个例子来说明这个想法: MVC - Binding dynamically added controls to a List<T> in a Model