Multiple forms on one MVC form, created with a loop, only the first submits data

Question

I have the following code, only the first form submits anything, the following submit null values, each model has data. If I change it to just one large form, everything submits. Why do the other individual forms post null values?

View

@model myModel[]
<ul>
    @for (int i = 0; i < Model.Length; i++)
    {
        using (Html.BeginForm("controllerAction", "Controller", FormMethod.Post,
                               new { id="Form"+i }))
        {
            <li>
                @Html.TextBoxFor(a => a[i].property1)
                @Html.CheckBoxFor(a => a[i].property2)
                @Html.HiddenFor(a => a[i].property3)
                <input type="submit" />
            </li>
        }
    }
</ul>

Controller

[HttpPost]
public ActionResult controllerAction(myModel[] models)
{
    ...do stuff...
}

only form that contains clicked submit button submited to server — Mustafa ASAN
– Mustafa ASAN, Commented Aug 14, 2015 at 12:16
@ConvertToInt32 That is only happening with the first form, and the first submit button, the following forms post null values when their submit buttons are clicked. — tallpaul
– tallpaul, Commented Aug 14, 2015 at 12:18

user3559349 · Accepted Answer · 2015-08-14 12:19:35Z

8

The reason is that your creating form controls with indexers in your for loop, and your POST method parameter is myModel[] models.

By default, the DefaultModelBinder requires collection to be zero based and consecutive, so if you attempt to submit the second form, your posting back [1].property1: someValue etc. Because the indexer starts at 1, binding fails and the model is null.

You can solve this by adding a hidden input for an Index property used by the model binder to match up non consecutive indexers

<li>
    @Html.TextBoxFor(a => a[i].property1)
    @Html.CheckBoxFor(a => a[i].property2)
    @Html.HiddenFor(a => a[i].property3)
    <input type="hidden" name="Index" value="@i" /> // add this
    <input type="submit" />
</li>

answered Aug 14, 2015 at 12:19

user3559349

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

2 Comments

Nick Burggraaff Over a year ago

Thank you sir, this is saving me big time!

Tassadaque Over a year ago

if you collection is child collection then name should be name ="childvarname.index" where childvarname is name of property for child collection in your variable

Collectives™ on Stack Overflow

Multiple forms on one MVC form, created with a loop, only the first submits data

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related