ASP .NET MVC dynamically created fields not bind to FormCollection

Question

I created a Partial Razor view with dynamically created fields:

for (int i = 0 ; i < atr.Count; i++)
{
    <div class="col-md-12 panel panel-default sx-box-shadow-on-hover">
        <div class="panel-heading">
            <h2 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#@string.Format("{0}{1}", "collapse", @atr[i].Id)" aria-expanded="true">
                    @atr[i].Label
                    <span class="caret"></span>
                </a>
            </h2>
        </div>
        <div id=@string.Format("{0}{1}", "collapse", @atr[i].Id) class="col-md-12 panel-collapse collapse" aria-expanded="true">
            <form>
                <div class="form-group">
                    @switch (atr[i].AtrType)
                    {
                        case "TXT":
                        case "NUM":
                            <input id=@atr[i].Id class="form-control margin5" name=@atr[i].Name type="text" />
                            break;
                        case "CHB":
                            <input class="form-control margin5" name=@atr[i].Name type="checkbox" />
                            break;
                        case "DTP":
                            @(Html.Kendo().DatePicker()
                                                .Name(@atr[i].Name)
                                                .Value(DateTime.Now)
                                                .HtmlAttributes(new { style = "margin-top: 5px; width:100% !important", title = @atr[i].Name })
                            )
                            break;
                        case "WTXT":
                            <textarea name=@atr[i].Name , rows="3"></textarea>
                            break;
                    }
                </div>
            </form>
        </div>
    </div>
}

Partial view is placed in other view with static fields and button. When I make POST action using button, in FormCollection I have only values from static fields. I can't bind this field's to Model because user can add or delete them in any moment. Every dynamic field created in partial view has it's own Id and Name. What am I missing here?

Post Action:

[HttpPost]
[Authorize]
public ActionResult Search(FormCollection form)
{
    //
}

Main Razor Page:

@using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
    <div class="col-md-12 panel panel-default sx-box-shadow-on-hover">
        <div class="panel-heading">
            <h2 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#searchCollapse" aria-expanded="true">
                    Search options
                    <span class="caret"></span>
                </a>
            </h2>
        </div>
        <div id="searchCollapse" class="col-md-12 panel-collapse collapse in" aria-expanded="true">
            <div class="form-group">
                <label class="col-md-12 fontBold margin5">Document type:</label>
                @(Html.Kendo().DropDownList()
                    .Name("DocumentTypesDropDownList")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetDocTypes", "Home");
                        });
                    })
                    .Events(e =>
                    {
                        e.Change("docTypeOnChange");
                    })
                    .HtmlAttributes(new { style = "margin-top: 5px; width:100% !important", title = "DocumentTypesDropDownList" })
                )
                <button id="SearchButton" class="btn btn-primary form-control margin5">Search</button>
                <div id="searchPanelDiv">
                    @{
                        Html.RenderPartial("SearchPanel");
                    }
                </div>
            </div>
        </div>
    </div>
}

Request body looks like this:

DocumentTypesDropDownList=1&Identificator=1234

Parameters from dynamic fields are missing.

Answer 1

Nested forms are unsupported in HTML.

If you remove the <form> and </form> tags from the partial view you should be able to capture the dynamic inputs from the FormCollection that is created on the main page by the @using (Html.BeginForm.