这种方式的基本原理是前端使用Vue.js声明视图模型并进行绑定，然后提交表单时把模型序列化为json字符串传递到后台，后台再使用Json.net反序列化为C#对象。
由于Vue.js的绑定特点，我们只需要操作数组元素即可，不需要额外关注DOM操作，节省了不少工作量。
首先，需要声明视图模型，并使用Vue.js进行绑定：
<script src="https://www.jb51.net/~/Scripts/vue.js"></script> <script type="text/javascript"> // 视图模型 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; } } }); </script>
然后，在视图中使用Vue.js绑定：
<form action="/Order2/NewPost" method="post"> <div> <div> <label>航班</label><br /> <input v-model="FlightNo" type="text" placeholder="航班号" /> </div> <div> <label>乘机人</label> <table> <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> <a href="javascript:;" v-on:click="addPassenger">添加乘机人</a> </div> <div> <input type="submit" v-on:click="submitForm" /> </div> </div> </div> <input type="hidden" /> </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字符串，然后后端再反序列化，最终得到强类型模型。