POST <ul>с <li>элементами со страницы просмотра MVC - PullRequest
Новая
       18

POST <ul>с <li>элементами со страницы просмотра MVC

0 голосов
/ 25 августа 2018

Итак, у меня есть список, куда пользователь может добавить любое количество предметов.Другими словами, у меня есть <ul> и переменная длина <li> элементов.
Переменная длина <li> elements означает, что пользователь добавляет <li> elements во время выполнения, если он / он готов, он / он отправляет форму.Так что я не знаю, сколько <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 ]

0 голосов
/ 26 августа 2018

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

    }
}

Надеюсь, это поможет.

0 голосов
/ 26 августа 2018

Вы должны избегать публикации html, в конце концов вам, вероятно, понадобится разобрать его, сохранить в db и т. Д. Как Джереми Томсон предложил использовать некоторую библиотеку на стороне клиента - jQuery, Angular или что угодно, и делать публикации элементовиспользуя Ajax.Вы можете публиковать их в каждом пользовательском вводе или сохранять их в модели mvc, объектах javascript и т. Д. И публиковать их сразу.

пример, просто чтобы понять: MVC - привязка динамически добавленных элементов управления кСписок в модели

...