Posting a list of complex objects in MVC with Razor

Question

SCENARIO:
First of all, sorry for my english. What I'm trying to do is posting trough form-POST the following object:

public class AppConfigViewModelInput
{
    public string Setting { get; set; }
    public string Value { get; set; }
}

to the following method:

    [HttpPost]
    public ActionResult Index(List<AppConfigViewModelInput> listOfAppConfigToUpdate)
    { ... }

But this input-object is constructed by only two properties of the view-object that I use to show the data on my razor page:

public class AppConfigViewModel : AppConfigViewModelInput
{
    public string Description { get; set; }
    public string ConfigType { get; set; }
    public int ViewOrderInWebAdmin { get; set; }
    public string ViewSpecialBackgroundColor { get; set; }
}

I was reading a lot of questions and blogs (check out SO References in the question). Finally I could get the following code for my razor page (I only post the form-code section):

@model List<PGWebAdmin.Models.AppConfigViewModel>
@{
    var itemCnt = 0;
}
@foreach (var item in Model)
    {
        itemCnt++;
        <input type="hidden" name="AppConfigViewModelInput.Index" value="@itemCnt" />
        <input type="text" class="input-sm form-control" value="@item.Value" name="AppConfigViewModelInput[@itemCnt].Value"/>
        <input type="text" name="AppConfigViewModelInput[@itemCnt].Setting" value="@item.Setting"/>
    }

and the form is created by:

    @using (Html.BeginForm("Index", "AppConfig",
   FormMethod.Post, new { @class = "navbar-form navbar-right", role = "search" }))
    {

QUESTION:
I could send the data, I'm checking with the dev tool the following information:

that is posted to the method, and the method is hit, but the value of the parameter is null:

I tested and corrected and tried several ways to do this but this is the far away I could get, and I can't understand what's happening.

I'm doing something wrong? Why I'm still getting null?

Any help will be preciated. Thanks!

REFERENCES:
MVC post a list of complex objects
How can I post a list of items in MVC
Posting to a list<modeltype> MVC3

Generate you view correctly using a `for` loop or `EditorTemplate` as per [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , Feb 19 '16 at 22:33

score 4 · Accepted Answer · answered Feb 19 '16 at 15:25

4

You need the change the name of the parameter to match what you are sending in the "name" field.

ie change your post controller:

[HttpPost]
public ActionResult Index(List<AppConfigViewModelInput> AppConfigViewModelInput)
    { ... }

answered Feb 19 '16 at 15:25

Ziv Weissman

4,400
3
28
61

This also. My post below works but this is important to remember. You're posting the input names as the object name. You need to post the input names as the name you've told the binder to expect. (not the type) – Mike Wallace Feb 19 '16 at 15:28

Yuval Perelman · Answer 2 · 2016-02-19T15:29:09.723

1

I dont see the reason you send the AppConfigModelInput.Index, i think that might be your problem. The message you send should not contain data that is not part of the model

edited Feb 19 '16 at 15:29

answered Feb 19 '16 at 15:22

Yuval Perelman

4,499
1
22
32

score 1 · Answer 3 · answered Feb 19 '16 at 15:24

Try this? It's maybe not the best answer but it should work for your purposes.

[HttpPost]
    public ActionResult Index(AppConfigViewModelInput[] listOfAppConfigToUpdate)
    { ... }

And the html like this ..

@model List<PGWebAdmin.Models.AppConfigViewModel>
@{
    var itemCnt = 0;
}
@foreach (var item in Model)
    {
        itemCnt++;
        <input type="text" class="input-sm form-control" value="@item.Value" name="listOfAppConfigToUpdate[@itemCnt].Value"/>
        <input type="text" name="listOfAppConfigToUpdate[@itemCnt].Setting" value="@item.Setting"/>
    }

I removed the top input of index.. i don't see where it fits in. You can convert the array to a list inside your Index method.

score 1 · Answer 4 · answered Feb 19 '16 at 15:32

Your input file names are wrong ! Since your HttpPost action expects a collection of AppConfigViewModel. You don't really need the AppConfigViewModelInput. prefix for your input field names. For model binding to work, Your input field names should be like

<input type="hidden" name="[0].Index" value="" />
<input type="hidden" name="[1].Index" value=" />

Also make sure your form elements are in a form tag.

The below should work.

@model List<PGWebAdmin.Models.AppConfigViewModel>
@{
    var itemCnt = 0;
}
@using (Html.BeginForm())
{
  foreach (var item in Model)
  {

    <input type="hidden" name="[@itemCnt].Index" value="@itemCnt" />
    <input type="text" value="@item.Value" name="AppConfigViewModelInput[@itemCnt].Value"/>
    <input type="text" name="[@itemCnt].Setting" value="@item.Setting"/>
    itemCnt++;
  }
    <input type="submit" value="Save" class="btn btn-default" />
}

Posting a list of complex objects in MVC with Razor

4 Answers4