Question

我需要能够在我的视图中拥有多个所谓的“创建”表单。我需要有关如何实现它的建议。我的表单基本上允许用户根据他们从下拉列表中选择的号码为多个乘客创建乘客详细信息/预订。使用javascript，显示更多div以满足他们的选择，最多可达3.我如何通过单个提交按钮在我的模型上创建这些乘客？我该如何收集这些价值？总共有3个div，用户想要预订的乘客详细信息越多，显示的div就越多。我的视图目前看起来像这样：

    <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

您的代码表明您的模型是单个实例 - 而您必须选择一个实例集合的模型。这样你的加价就像是

<% 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。

请参阅this blog post作者详细解释的内容（以及演示项目）如何编辑可变长度列表并提供添加一个项目的链接等。

如何拥有多个动态字段的“创建视图”？

1 个答案: