POST
with
elements from MVC view page

Question

So I have a list, where useer can add any number of items. In other words, I have a <ul> and variable length of <li> elements.
Variable length <li> elements means, user adds <li> elements in runtime, if she/he is done, she/he submits the form. So I don't know how many <li> elements are there.
Something like this :

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

I add <li> elements dynamically with JavaScript if user clicks a button, like this:

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);
}

My controller's method (AddList) looks like this:

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<IActionResult> NewShoppingList(object list)
{
    // I don't know how to accept that list

}

But this way my parameter list is null. How can I get that <ul> with some <li> elements?

Make a ViewModel with an instance of the Model and a List of LI items, then populate this ViewModel in the Controller, lastly set the cshtml to use the ViewModel instead of the model. — Jeremy Thompson, Aug 25 '18 at 20:26
I don't know how many LI items will be in the UL because just after user POSTED the FORM. — koviroli, Aug 25 '18 at 20:32
ul and li are not submittable form elements. You'd have to put the values into textboxes or hidden fields. Maybe take a tutorial about HTML forms and/or about submitting lists of values in conjunction with MVC, if you aren't familiar — ADyson, Aug 25 '18 at 20:33
`public class ViewModel { public Model m = new Model(); List LIs = new List(); }` Actually if you're adding items you should do post backs with jQuery Ajax calls or a similar technology. — Jeremy Thompson, Aug 25 '18 at 20:34
@JeremyThompson Ajax calls seems a good idea, thanks I will try it. — koviroli, Aug 26 '18 at 07:50

Hossein · Accepted Answer · 2018-08-26T14:30:11.673

8

ul and li are not submittable form elements.You can try the following.

I'm not sure what your view model looks like, but it seems like a list of string values? So then it will look like this in your view model:

public class YourViewModel
{
     public List<string> Items { get; set; }
}

In your view try the following:

<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);
}

When you post then these items should still be in the list.

[HttpPost]
[AllowAnonymous]
//[ValidateAntiForgeryToken]
public async Task<IActionResult> NewShoppingList(List<string> list)
{
    // I don't know how to accept that list

}

If you dont like add hidden field for each li , you can get all li items and send thems with Ajax.

like this:

function sendData() {
     var items = [];
        $("#myUL li").map(function () {
            items.push(this.innerText);
        });

        $.ajax({
            type: "POST",
            data: {
                list:  items
            },
            url: "/Home/NewShoppingList",
            success: function (res) {

    }
}

I hope this helps.

edited Aug 26 '18 at 14:30

answered Aug 26 '18 at 03:45

Hossein

3,083
3
16
33

I can't iterate through my Model.Items because I don't know how many items there. Maybe there is 0 elements in the begining, use add items in the view form dynamically. – koviroli Aug 26 '18 at 07:25
@koviroli `Model.Items.Count()` is there for checking elements . But if you want append `li` dynamically again it's True. just you need ,when add `li` item , add hidden field too. – Hossein Aug 26 '18 at 07:33
I know what Count() is for. I don't understand what you say in your last sentence. – koviroli Aug 26 '18 at 07:40
@koviroli You add `li` items dynamically with javascript? can you share your code? – Hossein Aug 26 '18 at 07:41
Edited my post with JavaScript, tell me if u don't understand my problem clearly. – koviroli Aug 26 '18 at 07:49
@koviroli I hope this help you. – Hossein Aug 26 '18 at 08:33
I get Bad Request (400) with Ajax post. – koviroli Aug 26 '18 at 12:53
@koviroli remove `[ValidateAntiForgeryToken]` tag and chack ` Ajax` method again – Hossein Aug 26 '18 at 14:31
@koviroli I'm glad that helped you. – Hossein Aug 26 '18 at 16:55

score 0 · Answer 2 · answered Aug 26 '18 at 00:00

0

You should avoid posting the html, after all you'll probably need to parse it, save to db etc. As Jeremy Thomson suggested use some client side library - jQuery, Angular or what ever you want and do the posts of items using Ajax. You can post them on each user input, or keep them in mvc model, javascript object etc. and post them at once.

example just to get the idea: MVC - Binding dynamically added controls to a List<T> in a Model

answered Aug 26 '18 at 00:00

Selvirrr

146
7

OP is NOT posting html. They are not posting anything at all (the `
` has no form controls)
– Aug 26 '18 at 00:59

POST with elements from MVC view page

2 Answers2

POST
with
elements from MVC view page