Model Collections Lost When Form Submitted

Question

Using the post request below the model returns null for both the collections yet it correctly returns the boolean attribute. My expectation was that the collections loaded into the model during the get request would persist to the post request. What am I missing?

EDIT: Essentially I am trying to update the list of invoices based on the users selection of a selectlist and a checkbox.

Controller:

    [HttpGet]
    [AllowAnonymous]
    public async Task<ActionResult> Index(bool displayFalse = true)
    {
        InvoiceViewModel invoiceView = new InvoiceViewModel();
        var companies = new SelectList(await DbContext.Company.ToListAsync(), "CompanyID", "Name").ToList();
        var invoices = await DbContext.Invoice.Where(s => s.Paid.Equals(displayFalse)).ToListAsync();

        return View(new InvoiceViewModel { Companies = companies,Invoices = invoices, SelectedCompanyID = 0, DisplayPaid = displayFalse});
    }

    [HttpPost]
    [AllowAnonymous]
    public async Task<IActionResult> Index(InvoiceViewModel model)
    {
        model.Invoices = await DbContext.Invoice.Where(s => s.CompanyID.Equals(model.SelectedCompanyID) && s.Paid.Equals(model.DisplayPaid)).ToListAsync();

        return View(model);         
    }

Model:

public class InvoiceViewModel

{

    public int SelectedCompanyID { get; set; }

    public bool DisplayPaid { get; set; }

    public ICollection<SelectListItem> Companies { get; set; }

    public ICollection<Invoice> Invoices{ get; set; }

}

View:

@model InvoiceIT.Models.InvoiceViewModel
<form asp-controller="Billing" asp-action="Index" method="post" class="form-horizontal" role="form">
<label for="companyFilter">Filter Company</label>
<select asp-for="SelectedCompanyID"  asp-items="Model.Companies"  name="companyFilter"  class="form-control"></select>
<div class="checkbox">
    <label>
        <input type="checkbox" asp-for="DisplayPaid" />Display Paid  
        <input type="submit" value="Filter" class="btn btn-default" />     
    </label>
</div>
<br />
</form>
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().InvoiceID)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().CompanyID)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().Description)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().InvoiceDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().DueDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().Paid)
    </th>
    <th></th>
</tr>

@foreach (var item in Model.Invoices)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CompanyID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DueDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Paid)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.InvoiceID }) |
            @Html.ActionLink("Details", "Index", "InvoiceItem", new { id = item.InvoiceID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.InvoiceID })
        </td>
    </tr>
}
</table>

Answer 1

A form only posts back the name/value pairs of its controls (input, textarea, select). Since the only 2 controls you generate are for the SelectedCompanyID and DisplayPaid properties of your model, then only those properties will be bound when post.

From your comments, what your really wanting to do is to update the table of invoices based on the values of the selected company and the checkbox.

From a performance point of view, the approach is to use ajax to update just the table of invoices based on the value of your controls.

Create a new controller method that return a partial view of the table rows

public PartialViewResult Invoices(int CompanyID, bool DisplayPaid)
{
  // Get the filtered collection
  IEnumerable<Invoice> model = DbContext.Invoice.Where(....
  return PartialView("_Invoices", model);
}

Note you may want to make the CompanyID parameter nullable and adjust the query if your wanting to initially display unfiltered results

And a partial view _Invoices.cshtml

@model IEnumerable<yourAssembly.Invoice>
@foreach(var item in Model)
{
  <tr>
    <td>@Html.DisplayFor(m => item.InvoiceID)</td>
    .... other table cells
  </tr>
}

In the main view

@model yourAssembly.InvoiceViewModel
@Html.BeginForm()) // form may not be necessary if you don't have validation attributes
{
  @Html.DropDownListFor(m => m.SelectedCompanyID, Model.Companies)
  @Html.CheckboxFor(m => m.DisplayPaid)
  <button id="filter" type="button">Filter results</button>
}
<table>
  <thead>
    ....
  </thead>
  <tbody id="invoices">
    // If you want to initially display some rows
    @Html.Action("Invoices", new { CompanyID = someValue, DisplayPaid = someValue })
  </tbody>
</table>

<script>
  var url = '@Url.Action("Invoices")';
  var table = $('#invoices');
  $('#filter').click(function() {
    var companyID = $('#SelectedCompanyID').val();
    var isDisplayPaid = $('#DisplayPaid').is(':checked');
    $.get(url, { CompanyID: companyID, DisplayPaid: isDisplayPaid }, function (html) {
      table.append(html);
    });
  });
</script>

The alternative would be to post the form as your are, but rather than returning the view, use

return RedirectToAction("Invoice", new { companyID = model.SelectedCompanyID, DisplayPaid = model.DisplayPaid });

and modify the GET method to accept the additional parameter.

Side note: Your using the TagHelpers to generate

select asp-for="SelectedCompanyID"  asp-items="Model.Companies"  name="companyFilter"  class="form-control"></select>

I'm not familiar enough with them to be certain, but if name="companyFilter" works (and overrides the default name which would be name="SelectedCompanyID"), then you generating a name attribute which does not match your model property and as a result SelectedCompanyID would be 0 (the default for int) in the POST method.

Answer 2

Appending ToList() to the statement that populates companies is converting the SelectList into a List<T>, which the form will not recognize as a SelectList. Also, by using the dynamic var keyword, you are masking this problem. Try this instead:

SelectList companies = new SelectList(await DbContext.Company.ToListAsync(), "CompanyID", "Name");

In general, try to avoid use of var unless the type is truly dynamic (unknown until runtime).

Answer 3

You put your model data out of form, so it would not submited!

    <form asp-controller="Billing" asp-action="Index" method="post" class="form-horizontal" role="form">
<label for="companyFilter">Filter Company</label>
<select asp-for="SelectedCompanyID"  asp-items="Model.Companies"  name="companyFilter"  class="form-control"></select>
<div class="checkbox">
    <label>
        <input type="checkbox" asp-for="DisplayPaid" />Display Paid  
        <input type="submit" value="Filter" class="btn btn-default" />     
    </label>
</div>
<br />
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().InvoiceID)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().CompanyID)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().Description)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().InvoiceDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().DueDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Invoices.FirstOrDefault().Paid)
    </th>
    <th></th>
</tr>

@foreach (var item in Model.Invoices)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CompanyID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DueDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Paid)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.InvoiceID }) |
            @Html.ActionLink("Details", "Index", "InvoiceItem", new { id = item.InvoiceID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.InvoiceID })
        </td>
    </tr>
}
</table>
</form>

Answer 4

Using a for loop to create the with the companies will make it possible to map back and persist the company values

for(c = 0 ; c < Model.Companies.Count(); c++)
{
    <input type='hidden' name='@Html.NameFor(Model.Companies[c].Propery1)'       id='@Html.IdFor(Model.Comapnies[c].Propery1)' value='somevalue'>someText />
 <input type='hidden' name='@Html.NameFor(Model.Companies[c].Propery2)'                id='@Html.IdFor(Model.Comapnies[c].Propery2)' value='somevalue'>someText />
}

this ensures that the list is mapped back as the default model binder expects list to be in ListProperty[index] format