Why is my MVC form failing to post a list of objects, resulting in a null list in the controller?

MVC form cannot submit object list

In an MVC application, users encountered a problem: a form containing a list of objects could not submit data to the controller, resulting in an empty list being passed. The form uses a loop and a partial view to render the items, but upon submission the controller receives an empty enum.

Problem Analysis

To understand why the data is not submitted correctly, let's examine the provided code:

Parent view:

<code class="language-csharp">@foreach (var planVM in Model)
{
    @Html.Partial("_partialView", planVM)
}</code>

Partial View (_partialView):

<code class="language-csharp">@Html.HiddenFor(p => p.PlanID)
@Html.HiddenFor(p => p.CurrentPlan)
@Html.CheckBoxFor(p => p.ShouldCompare)</code>

PlanCompareViewModel class:

<code class="language-csharp">public class PlansCompareViewModel
{
    public int PlanID { get; set; }
    public Plan CurrentPlan { get; set; }
    public bool ShouldCompare { get; set; }
}</code>

Solution

The root cause of the problem lies in the way the form elements are named. Without an index, the model binder cannot distinguish between the elements of the list. To fix this, we need to assign the correct index to the name of the form element:

Improved partial view (_partialView):

<code class="language-csharp">@for (int i = 0; i < Model.Count(); i++)
{
    @Html.HiddenFor(p => p[i].PlanID)
    @Html.HiddenFor(p => p[i].CurrentPlan)
    @Html.CheckBoxFor(p => p[i].ShouldCompare)
}</code>

This modification allows the model binder to associate individual data elements with the correct list items.

Improve form generation using editor templates

In order to be more concise and efficient, it is recommended to use the editor template. Part of the view can be replaced with the following content by creating PlanCompareViewModel.cshtml in the EditorTemplates folder:

<code class="language-csharp"><div>
    @Html.HiddenFor(p => p.PlanID)
    @Html.HiddenFor(p => p.CurrentPlan)
    @Html.CheckBoxFor(p => p.ShouldCompare)
</div></code>

Finally, the parent view can be simplified to:

<code class="language-csharp">@Html.EditorForModel()</code>

The editor template automatically handles indexing to ensure form elements are named correctly for model binding.

The above is the detailed content of Why is my MVC form failing to post a list of objects, resulting in a null list in the controller?. For more information, please follow other related articles on the PHP Chinese website!