POST Form which has a list of objects as a viewModel property (without ajax)

Question

I have a view model which gets displayed in a cshtml view like this:

@model MyViewModel
<form action="...">
  @foreach (var item in this.Model.MyList)
  {
    <input type="checkbox" name="item.Name"/>
  }
</form>

Then I have a controller method on the backend:

[HttpPost]
public ActionResult SaveMyViewModel(MyViewModel viewModel)
{
...

When I inspect the viewModel in the controller method while POSTing, it has all null properties. I would expect it to have values in MyList and in there, bools for each item in MyList.

Is this possible without Ajax? I cannot use ajax here.

What must be done to the form in order to properly return an accurate representation of the viewModel back to the server?

Which property of `MyViewModel` you want to be populated ? What type is that property ? — Shyju, Aug 29 '18 at 23:51
A controller doesn't care if a post came from ajax or from a standard form submit. What does the request body look like from the browser dev tools network trace? — Crowcoder, Aug 29 '18 at 23:53
You can always use editor templates https://stackoverflow.com/questions/12221314/how-do-i-bind-checkboxes-to-the-listint-property-of-a-view-model/12221514#12221514 — Shyju, Aug 29 '18 at 23:53
Your checkbox does not even have a `value` attribute (so it will only ever post back "on"` if checked (or nothing is unchecked). And your have given it `name="item.Name"` which would only bind to a model containing a property name `item` which is a complex object. If you want to generate list of checkboxes, refer [Pass List of Checkboxes into View and Pull out IEnumerable](https://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) — , Aug 29 '18 at 23:57
Refer also [Post an HTML Table to ADO.NET DataTable](https://stackoverflow.com/questions/30094047/post-an-html-table-to-ado-net-datatable/30094943#30094943) to understand that you cannot use a `foreach` loop to generate form controls for a collection, and to understand how the `name` attribute relates to your model — , Aug 29 '18 at 23:59
@Shyju - The property is `MyList` which is a list of other viewmodels, all of which have `Name` properties — JacobIRR, Aug 30 '18 at 17:10

score 0 · Answer 1 · answered Aug 30 '18 at 01:29

I am assuming your button to submit the form is within the <form> element in HTML.

When you are POSTing a List (Array) of an Object from HTML to Controller, you need to add index of each item in the List to the HTML name property.

Additionally, the name property should also have same name as of the Property in the C# code.

Your code should look like below to work properly.

<form action="...">
   @{ 
var i = 0; 
}
  @foreach (var item in this.Model.MyList)
  { var nameChecked = string.Empty; 
 if(item.Name != null) nameChecked = “checked”;
<input type="checkbox" name="viewModel[i].Name" @nameChecked  />
i++;
  }
</form>

NOTE: This is a basic code sample. You can always enhance to work more efficiently.

Hope this helps!

POST Form which has a list of objects as a viewModel property (without ajax)

1 Answers1