public class OrderModel
{
 /// 

 /// 航班号
 /// 
 public string FlightNo { get; set; }
 /// 

 /// 乘机人
 /// 
 public List 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 passenger = new List();
 passenger.Add(new Models.Passenger());
 orderModel.Passengers = passenger;
 return View(orderModel);
}

 
 航班

 @Html.TextBoxFor(p => p.FlightNo, new { placeholder = "航班号" })
 

由于ASP.NET MVC的模型绑定器(DefaultModelBinder)具备自动解析形如"[0].属性名"、"[1].属性名"的能力，所以可以在模板文件中以占位符的形式来表示数组下标：

 
 姓名：
 
 身份证号：
 
 
  删除
 
 

以上代码中的"{}"是数组下标占位符。当添加乘机人时，可预先计算已有乘机人个数，然后再使用JavaScript替换”{}“为数组下标。

// 添加乘机人
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);
 }
}

这样，当我们提交表单时，乘机人信息就会自动填充到模型的Passengers属性中。

方式二：使用Vue.js
使用第一种方式需要编写大量前端代码，包括模板文件，添加删除事件，还需要处理重新调整顺序时的插值问题。

如果使用前端MVVM框架会让这一流程变得简单，目前比较流行的前端MVVM框架有AngularJS，有老古董KnockoutJS，也有新兴小众框架Vue.js。

AngularJS比较庞大，这么简单的一个模型绑定用Anuglar有一种杀鸡用牛刀的感觉；Knockout和Vue都是轻量级的MVVM框架，但Knockout需要包裹原生数据来制造可观察对象，取值和赋值时需要采用函数调用的形式，使用起来不是很方便，所以我选择了Vue.js。Vue.js是一个轻量高效的库，它没有像Angular的module、controller、scope、factory、service这种API，核心就是一个模型绑定功能。大小只有70kb，gzip压缩后只有25kb，非常轻量化。

这种方式的基本原理是前端使用Vue.js声明视图模型并进行绑定，然后提交表单时把模型序列化为json字符串传递到后台，后台再使用Json.net反序列化为C#对象。

由于Vue.js的绑定特点，我们只需要操作数组元素即可，不需要额外关注DOM操作，节省了不少工作量。

首先，需要声明视图模型，并使用Vue.js进行绑定：

 // 视图模型
 var viewModel = {
  FlightNo: '',
  Passengers: [
  { ElementId: 'passenger_1', Name: '', IdNo: '' }
  ]
 }
 // 模型绑定
 new Vue({
  el: '#app',
  data: viewModel,
  methods: {
  removePassenger: function (elementId) {
   for (var i = 0; i < viewModel.Passengers.length; i++) {
   if (viewModel.Passengers[i].ElementId == elementId) {
    viewModel.Passengers.splice(i, 1);
   }
   }
  },
  addPassenger: function () {
   var tb = document.getElementsByTagName('table')[0];
   var index = tb.rows[tb.rows.length - 1].getElementsByTagName('input')[0].getAttribute("id").split('_')[1];
   viewModel.Passengers.push({ Name: '', IdNo: '', ElementId: 'passenger_' + (index + 1) });
  },
  submitForm: function () {
   var jsonString = JSON.stringify(viewModel);
   document.getElementById("viewModel").value = jsonString;
   return true;
  }
  }
 });

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

 
 
  航班