Question

I need to be able to have multiple so-called “create” forms in my view. I need advice as to how to go about achieving it. My form basically allows a user to create passenger details / book for several passengers depending on the number they have selected from a dropdownlist. Using javascript, more div’s a displayed to cater to their selection, up to a maximum of 3. How would I go about creating these passengers on my model through a single submit button though? How would I collect these values? There are a total of 3 divs, and the more passenger details the user wants to book for, the more divs are shown.My view currently looks like so:

    <h2>Booking</h2>
<div class="editor-label">
    <%=Html.Label("Select number of passengers") %>
</div>
<div class="editor-field">
    <%=Html.DropDownList("PassengerNumber", new List<SelectListItem>
                {
                    new SelectListItem{Text="1", Value="1"},
                    new SelectListItem{Text="2", Value="2"},
                    new SelectListItem{Text="3", Value="3"}
                    })%>
</div>
<% using (Html.BeginForm()) {%>
    <%= Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>

       <div id="div1">
       <h2>Passenger Details 1</h2>
        <div class="editor-label">
            <%= Html.LabelFor(model => model.flight_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.flight_number, ViewData["Flight_Number"]) %>
            <%= Html.ValidationMessageFor(model => model.flight_number) %>
        </div>



        <div class="editor-label">
            <%= Html.LabelFor(model => model.title) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.title) %>
            <%= Html.ValidationMessageFor(model => model.title) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.first_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.first_name) %>
            <%= Html.ValidationMessageFor(model => model.first_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.last_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.last_name) %>
            <%= Html.ValidationMessageFor(model => model.last_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.date_of_birth) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.date_of_birth) %>
            <%= Html.ValidationMessageFor(model => model.date_of_birth) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.passport_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.passport_number) %>
            <%= Html.ValidationMessageFor(model => model.passport_number) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.address) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.address) %>
            <%= Html.ValidationMessageFor(model => model.address) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.phone) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.phone) %>
            <%= Html.ValidationMessageFor(model => model.phone) %>
        </div>
        </div>

        <br />
        <div id="div2">
        <h2>Passenger Details 2</h2>
        <div class="editor-label">
            <%= Html.LabelFor(model => model.flight_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.flight_number, ViewData["Flight_Number"]) %>
            <%= Html.ValidationMessageFor(model => model.flight_number) %>
        </div>



        <div class="editor-label">
            <%= Html.LabelFor(model => model.title) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.title) %>
            <%= Html.ValidationMessageFor(model => model.title) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.first_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.first_name) %>
            <%= Html.ValidationMessageFor(model => model.first_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.last_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.last_name) %>
            <%= Html.ValidationMessageFor(model => model.last_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.date_of_birth) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.date_of_birth) %>
            <%= Html.ValidationMessageFor(model => model.date_of_birth) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.passport_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.passport_number) %>
            <%= Html.ValidationMessageFor(model => model.passport_number) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.address) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.address) %>
            <%= Html.ValidationMessageFor(model => model.address) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.phone) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.phone) %>
            <%= Html.ValidationMessageFor(model => model.phone) %>
        </div>
        </div>
        <br />
        <div id="div3">
        <h2>Passenger Details 3</h2>
        <div class="editor-label">
            <%= Html.LabelFor(model => model.flight_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.flight_number, ViewData["Flight_Number"]) %>
            <%= Html.ValidationMessageFor(model => model.flight_number) %>
        </div>



        <div class="editor-label">
            <%= Html.LabelFor(model => model.title) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.title) %>
            <%= Html.ValidationMessageFor(model => model.title) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.first_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.first_name) %>
            <%= Html.ValidationMessageFor(model => model.first_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.last_name) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.last_name) %>
            <%= Html.ValidationMessageFor(model => model.last_name) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.date_of_birth) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.date_of_birth) %>
            <%= Html.ValidationMessageFor(model => model.date_of_birth) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.passport_number) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.passport_number) %>
            <%= Html.ValidationMessageFor(model => model.passport_number) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.address) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.address) %>
            <%= Html.ValidationMessageFor(model => model.address) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.phone) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.phone) %>
            <%= Html.ValidationMessageFor(model => model.phone) %>
        </div>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<% } %>

<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#div2").hide();
            $("#div3").hide();
        });
        $("#PassengerNumber").change(function () {
            if ($("#PassengerNumber").val() == "1") {
                $("#div2").hide();
                $("#div3").hide();
            }
            if ($("#PassengerNumber").val() == "2") {
                $("#div2").show();
                $("#div3").hide();
            }
            if ($("#PassengerNumber").val() == "3") {
                $("#div2").show();
                $("#div3").show();
            }
        });
</script>

Answer 1

Your code indicates that your model is a single instance – instead, you have to choose a model that is a collection of instances. So that your mark-up will be something like

<% for (int i = 0; i < 3; i++) { %>

    <div id="div1">
       <h2>Passenger Details <%: i %></h2>
        <div class="editor-label">
            <%= Html.LabelFor(model => model[i].flight_number) %>
        </div>
...

ASP.NET MVC does support model binding to a list/collection.

See this blog post where author has explained in detail (along with demo project) how to edit a variable length list and provide a link to add one more item etc.