Fatal编程技术网
  • html/
  • Html 如何拥有一个；“创建视图”；有多个动态字段？

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

html asp.net-mvc

Html 如何拥有一个；“创建视图”；有多个动态字段？,html,asp.net-mvc,Html,Asp.net Mvc,我需要能够在我的视图中有多个所谓的“创建”表单。我需要关于如何着手实现这一目标的建议。我的表单基本上允许用户根据他们从下拉列表中选择的人数为多个乘客创建乘客详细信息/预订。使用javascript，将显示更多的div，以满足他们的选择，最多可显示3个div。但是，我如何通过一个提交按钮在我的模型上创建这些乘客呢？如何收集这些值？总共有3个div，用户想要预订的乘客详细信息越多，显示的div就越多。我的视图目前看起来是这样的： <h2>Booking</h2> &l

我需要能够在我的视图中有多个所谓的“创建”表单。我需要关于如何着手实现这一目标的建议。我的表单基本上允许用户根据他们从下拉列表中选择的人数为多个乘客创建乘客详细信息/预订。使用javascript，将显示更多的div，以满足他们的选择，最多可显示3个div。但是，我如何通过一个提交按钮在我的模型上创建这些乘客呢？如何收集这些值？总共有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>

预订
领域
乘客详情1
型号.航班号）%>
model.flight\u number，ViewData[“flight\u number”]）%>
型号.航班号）%>
型号（名称）%>
型号（名称）%>
型号（名称）%>
型号.名称）%>
型号.名称）%>
型号.名称）%>
型号.姓氏）%>
型号.姓氏）%>
型号.姓氏）%>
型号.出生日期）%>
型号.出生日期）%>
型号.出生日期）%>
型号.护照号码）%>
型号.护照号码）%>
型号.护照号码）%>
型号（地址）%>
型号（地址）%>
型号（地址）%>
型号（电话）%>
型号（电话）%>
型号（电话）%>


乘客详情2
型号.航班号）%>
model.flight\u number，ViewData[“flight\u number”]）%>
型号.航班号）%>
型号（名称）%>
型号（名称）%>
型号（名称）%>
型号.名称）%>
型号.名称）%>
型号.名称）%>
型号.姓氏）%>
型号.姓氏）%>
型号.姓氏）%>
型号.出生日期）%>
型号.出生日期）%>
型号.出生日期）%>
型号.护照号码）%>
型号.护照号码）%>
型号.护照号码）%>
型号（地址）%>
型号（地址）%>
型号（地址）%>
型号（电话）%>
型号（电话）%>
型号（电话）%>


乘客详情3
型号.航班号）%>
model.flight\u number，ViewData[“flight\u number”]）%>
型号.航班号）%>
型号（名称）%>
型号（名称）%>
型号（名称）%>
型号.名称）%>
型号.名称）%>
型号.名称）%>
型号.姓氏）%>
型号.姓氏）%>
型号.姓氏）%>
型号.出生日期）%>
型号.出生日期）%>
型号.出生日期）%>
型号.护照号码）%>
型号.护照号码）%>
型号.护照号码）%>
型号（地址）%>
型号（地址）%>
型号（地址）%>
型号（电话）%>
型号（电话）%>
型号（电话）%>



$（文档）.ready（函数（）{
$（“#div2”）.hide（）；
$（“#div3”）.hide（）；
});
$（“#PassengerNumber”）.change（函数（）{
if（$（“#PassengerNumber”）.val（）=“1”）{
$（“#div2”）.hide（）；
$（“#div3”）.hide（）；
}
if（$（“#PassengerNumber”）.val（）=“2”）{
$（“#div2”）.show（）；
$（“#div3”）.hide（）；
}
if（$（“#PassengerNumber”）.val（）=“3”）{
$（“#div2”）.show（）；
$（“#div3”）.show（）；
}
});
您的代码表明您的模型是一个实例-相反，您必须选择一个实例集合的模型。所以你的加价是这样的

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


乘客详情
型号[i]。航班号）%>
...
NETMVC

请参阅作者在哪里详细解释了（以及演示项目）如何编辑可变长度列表，并提供了添加一个项目的链接等