<input type="text" name="[0].Name" />

<input type="text" name="[1].Name" />

<input type="text" name="[2].Name" />

<input type="text" name="[4].Name" />

<input type="text" name="[5].Name" />

public class OrderModel
{
 /// <summary>
 /// 航班号
 /// </summary>
 public string FlightNo { get; set; }
 /// <summary>
 /// 乘机人
 /// </summary>
 public List<Passenger> Passengers { get; set; }
}
 
public class Passenger
{
 public string Name { get; set; }
 public string IdNo { get; set; }
}

public ActionResult New()
{
 Models.OrderModel orderModel = new Models.OrderModel();
 List<Models.Passenger> passenger = new List<Models.Passenger>();
 passenger.Add(new Models.Passenger());
 orderModel.Passengers = passenger;
 return View(orderModel);
}

<div style="width:680px">
 <div class="form-group">
 <label>航班</label><br/>
 @Html.TextBoxFor(p => p.FlightNo, new { placeholder = "航班号" })
 </div>
 <div class="form-group">
 <label>乘机人</label>
 <table class="passenger" >
  <tbody>
  @if (Model.Passengers != null && Model.Passengers.Count > 0) {
   for(int i = 0; i < Model.Passengers.Count; i++) {
   <tr>
    <td>姓名：</td>
    <td>@Html.TextBoxFor(p => Model.Passengers[i].Name)</td>
    <td>身份证号：</td>
    <td>@Html.TextBoxFor(p => Model.Passengers[i].IdNo)</td>
    <td>
    <a href="javascript:;" onclick="removePassenger(this)" >删除</a>
    </td>
   </tr>
   }
  }
  </tbody>
 </table>
 <div style="margin-top:10px">
  <a href="javascript:;" onclick="addPassenger()">添加乘机人</a>
 </div>
 </div>
</div>

<!-- 乘机人模板 -->
<script type="text/html" id="passengerTemplate">
 <tr>
 <td>姓名：</td>
 <td><input id="Passengers_{}__Name" name="Passengers[{}].Name" type="text" value=""></td>
 <td>身份证号：</td>
 <td><input id="Passengers_{}__IdNo" name="Passengers[{}].IdNo" type="text" value=""></td>
 <td>
  <a href="javascript:;" onclick="removePassenger(this)">删除</a>
 </td>
 </tr>
</script>

// 添加乘机人
function addPassenger() {
 // 当前添加行数组元素下标
 var index = $(".passenger").find("tbody").find("tr").length;
 //{}是数组元素下标占位符
 var passengerHTML = $('#passengerTemplate').html().replace(/{}/g, index);
 $(".passenger").find("tbody").append(passengerHTML);
}

// 删除乘机人
function removePassenger(e) {
 $(e).parents("tr").remove();
 // 依次遍历表格的每行，重新调整数组下标
 var tb = $(".passenger").first();
 var count = tb.find("tbody").find("tr").length;
 for (var i = 0; i < count; i++) {
 var newTR = tb.find("tr").eq(i).formhtml().replace(/\[\d+\]/g, '[' + i + ']');//重新调整数组元素下标
 tb.find("tr").eq(i).html(newTR);
 }
}

<script src="/UploadFiles/2021-04-02/vue.js">

然后，在视图中使用Vue.js绑定：


<form action="/Order2/NewPost" method="post">
 <div id="app" style="width:680px">
 <div class="form-group">
  <label>航班</label><br />
  <input v-model="FlightNo" type="text" placeholder="航班号" />
 </div>
 <div class="form-group">
  <label>乘机人</label>
  <table class="passenger">
  <tbody>
   <tr v-for="passenger in Passengers">
   <td>姓名：</td>
   <td><input v-model="passenger.Name" v-bind:id="passenger.ElementId" type="text" /></td>
   <td>身份证号：</td>
   <td><input v-model="passenger.IdNo" type="text" /></td>
   <td>
    <a href="javascript:;" v-on:click="removePassenger(passenger.ElementId)">删除</a>
   </td>
   </tr>
  </tbody>
  </table>
  <div style="margin-top:10px">
  <a href="javascript:;" v-on:click="addPassenger">添加乘机人</a>
  </div>
  <div style="margin-top:10px">
  <input type="submit" class="btn btn-default" v-on:click="submitForm" />
  </div>
 </div>
 </div>
 <input type="hidden" id="viewModel" name="viewModel" />
</form>


最后在Controller里，我们反序列化即可得到对应的C#强类型模型：


[HttpPost]
public ActionResult NewPost()
{
 var jsonString = Request.Form["viewModel"];
 Models.OrderModel model = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.OrderModel>(jsonString);
 if (model != null) {
 // our code here...
 }
 return RedirectToAction("Index", "Home");
}
 




这两种方式均可以实现动态数组绑定，方式一使用js进行占位符替换，表单中的元素都以[index].属性名的方式命名，然后由MVC默认的模型绑定器来转化模型；
方式二使用Vue.js来直接进行模型绑定，提交表单时将模型序列化为json字符串，然后后端再反序列化，最终得到强类型模型。
以上就是本文的全部内容，希望对大家的学习有所帮助。