2011-09-30 86 views
0

我需要能夠在我的視圖中擁有多個所謂的「創建」表單。我需要關於如何去實現它的建議。我的表單基本上允許用戶根據他們從下拉列表中選擇的號碼爲多位乘客創建乘客詳細信息/預訂。使用javascript,顯示更多的div來迎合他們的選擇,最多可達3個。但是,如何通過單個提交按鈕創建我的模型上的這些乘客?我將如何收集這些值?共有3個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> 

回答

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這裏筆者詳細(連同示範項目)如何編輯一個可變長度的列表,並提供一個鏈接解釋多加一個項目等