How to send data from view back to controller in ASP.NET Core MVC application?

Question

I can not figure out how can I pass data from view back to controller. I have a list of ChildViewModels that are shown on screen. User can add data to this list and after everything is done, press 'Submit' and send these items back to controller.

Here are my view models:

public class ParentViewModel
{
    public int Id { get; set; }
    public IList<ChildViewModel> Children { get; set; }
}

public class ChildViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Here is how I display them in main view:

<div id="editorRows">
    @foreach (var item in Model.Children)
    {
    <partial name="_myPartial" model="item" />
    }
</div>
<a id="addItem" asp-action="BlankSentence" asp-controller="Home">Add Row...</a> <br />
<input type="submit" id="submit" value="Finished" onclick="SaveUser()" />

Here is partial view definition:

<div class="editorRow">
@using (Html.BeginCollectionItem("Children"))
{
    @Html.HiddenFor(m => m.Id)
    <span>Name: </span> @Html.EditorFor(m => m.Name);
}
<a href="#" class="deleteRow">delete</a>

Then I have such script which adds new row:

$("#addItem").click(function () {
    $.ajax({
        url:'@Url.Action("BlankSentence", "Home")',
        cache: false,
        success: function (html) {
            $("#editorRows").append(html);            
        }
    });
    return false;
});

User can add rows, all this works fine. Then I would like to have a button that sends info back to controller. I would create object that holds necessary data, including information that is 'inside' added objects (partialViews?) and send it back with help of ajax. This would be done with function like this:

 function SaveUser() {

    var products = [];
    $("#editorRows").each(function(index, value) {
        pr.push(value);
    });

    var model = 
    {
        Name: "SomeDataFromTextBox",
        Products : pr,         
    };


    $.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "/Home/Save",
    contentType: "application/json"
    }).done(function(res) {       
    console.log('res', res);
    });
    }

Here is receiver:

public JsonResult Save([FromBody] SomeViewModel model)
{
   return Json(model);
}

My question is this - how do I populate this collection to be sent back to controller?

var products = [];
$("#editorRows").each(function(index, value) {
    pr.push(value);
});

I have tried many things, it either sends null or does not even call the Save method. Sorry for the lengthy post, I am totally new to ASP.NET Core and did not know which parts of code could be omitted without losing general idea.

Also, if my approach is flawed in some other way, I would like to hear your comments.

Dimitris Maragkos · Accepted Answer · 2023-01-05 18:35:09Z

1

jQuery .each() function gives you the index as first parameter and the whole html Element as second parameter. You need to use this element to select the inner input element and get its value. Also $("#editorRows") gives you the wrapper div element, you can use $(".editorRow") to get the collection of <div class="editorRow"> elements.

var products = [];

$(".editorRow").each(function(index, element) {
    // select the element that was created with @Html.EditorFor(m => m.Name)
    let inputEl = element.querySelector("input[name='Name']");
    // get the input element value
    products.push(inputEl.value);
});

jQuery .each() documentation

answered Jan 5, 2023 at 18:35

Dimitris Maragkos

11.6k2 gold badges17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

niks Over a year ago

Hi, thank you for the answer, but still nothing gets added to products array.

Dimitris Maragkos Over a year ago

Do you mean the JavaScript array or an array in your viewmodel?

niks Over a year ago

Yes, but I finally managed to populate array using such code: products.push({ Name: inputEl.value }); Having said that I now run into new problem - it loops through too many times. If editorRows contains 2 items, products array gets 3 items, first one is doubled.

niks Over a year ago

I solved my problem, it was a stupid mistake on my side. Thank you for your help!

Collectives™ on Stack Overflow

How to send data from view back to controller in ASP.NET Core MVC application?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related