0

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>
Improve this question

1 Answer 1

Reset to default
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.

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.