여러 동적 필드가있는 "보기 만들기"방법

Question

내보기에는 여러 개의 소위 "작성"양식이 있어야합니다. 그것을 달성하는 방법에 관해서는 조언이 필요합니다. 내 양식은 기본적으로 사용자가 드롭 다운 목록에서 선택한 번호에 따라 승객 정보/여러 명의 승객을위한 책을 만들 수 있습니다. javascript를 사용하면 더 많은 div가 최대 3 개까지 선택할 수 있습니다. 어떻게 하나의 제출 버튼을 통해 내 승객을 만들 수 있습니까? 이 값들을 어떻게 수집합니까? 이 3 명 div의 총이 있고, 사용자가 예약하고자하는 많은 승객 세부 사항은 더 된 div는 shown.My보기입니다 현재 같은 같습니다

<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를 참조하십시오