在ASP.NET的MVC中使用Razor语法可以很容易地在视图中显示数组。如果要绑定数组模型，会遇到索引断裂的情况，如下例：所示。

输入类型='text '名称='[0]。名称/输入类型='文本'名称='[1]。名称/输入类型='文本'名称='[2]。名称/输入类型='文本'名称='[4]。名称'/输入='文本'名称=' [5]。名称/数组名称在索引3处断开。模型绑定器解析完成后，下面的4和5将被丢弃，只有0、1和2将被正确解析到相应的模型中。

这种断裂经常发生在动态数组绑定中。

接下来，我们将通过一个案例来讨论如何绑定动态数组。假设以下应用场景：

要求能够动态增删乘客。表单最终提交后，乘客的信息应该填充到视图模型中的数组或集合属性中，以便于我们后续的业务处理。

方法1:用占位符替换第一种方法，我称之为“占位符替换”，使用了ASP.NET MVC的DefaultModelBinder，并结合了前端处理。

首先，第一步是根据业务场景设计视图模型：

公共类订单模型{///汇总////航班号////汇总公共字符串航班号{ get设置；} ///汇总////乘客////汇总公众名单乘客乘客{ get设置；}}公共类乘客{公共字符串名称{ get设置；}公共字符串IdNo { get设置；}}其次，将这个视图模型转移到视图：

公共操作结果新(){模型。OrderModel orderModel=新模型。order model()；列表模型。乘客乘客=新列表模型。乘客()；乘客。添加(新型号。乘客())；orderModel。乘客=乘客；返回视图(order model)；}然后在视图文件中显示：

div=' width :680 px ' div class=' form-group '标签航班/label br/@ html . textbox for(p=p . flight no，New { placeholder=' flight number ' })/div class=' form-group '标签乘客/标签表class=' passenger ' t body @ if(model。乘客们！=空模型。乘客。计数0){ for(int I=0；模型一。乘客。计数；I){ tr TD name:/TD TD @ html . textbox for(p=model . peoples[I]。姓名)/TD TD身份证号：/TD TD @ html . textbox for(p=model . peoples[I]。idno)/TD TD a href=' JavaScript 3360；'onclick=' remove passenger(this)' delete/a/TD/tr } }/t body/table div style=' margin-top :10 px ' a href=' JavaScript 3360；'onclick=' addPassenger()' Add passenger/a/div/div/div因为ASP.NET MVC的模型绑定器有自动解析“[0]的形状的能力。属性名'和'[1]。属性名'，数组下标可以用模板文件中占位符的形式表示：

！-乘客模板-脚本类型=' text/html ' id=' passenger template ' tr TD name:/TD TD输入id=' peoples _ { } _ _ name ' name=' peoples[{ }]。name ' type=' text ' value=' '/TD TD id number:/TD TD输入id=' peoples _ { } _ _ idno ' name=' peoples[{ }]。idno ' type=' text ' value=' '/TD TD a href=' JavaScript 3360；上述代码中的onclick=' remove passenger(this)' delete/a/TD/tr/script“{ 0 }”是一个数组下标占位符。添加乘客时，可以提前计算现有乘客的数量，然后用JavaScript将“{}”替换为数组下标。

//添加乘客函数addPassenger() {//当前添加行数组元素下标var index=$(')。乘客')。find ('tbody ')。查找(' tr ')。长度；//{}是数组元素下标占位符var passenger html=$(' # passenger template ')。html()。替换(/{}/g，index)；$('.乘客')。find('tbody ')。追加(passengerHTML)；}删除乘客时，注意如果最后一个没有删除，索引会断裂，数组下标需要重新调整：

//删除乘机人函数删除PERFoRMANCE(e){ $(e).父母(' tr ').移除();//依次遍历表格的每行，重新调整数组下标var tb=$(' .乘客')。first()；var count=tb.find('tbody ').查找(' tr ').长度；for(var I=0；我数；i ) { var newTR=tb.find('tr ').方程式(I ).formhtml().替换(/[d ]/g，'[' I ']')；//重新调整数组元素下标tb.find('tr ').方程式(I ).html(NewTr)；}}这样，当我们提交表单时，乘机人信息就会自动填充到模型的乘客属性中。

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

如果使用前端视图模型框架会让这一流程变得简单，目前比较流行的前端视图模型框架有AngularJS，有老古董击倒对手，也有新兴小众框架Vue.js。

AngularJS比较庞大，这么简单的一个模型绑定用Anuglar有一种杀鸡用牛刀的感觉；迷人的和某视频剪辑软件都是轻量级的视图模型框架，但迷人的需要包裹原生数据来制造可观察对象，取值和赋值时需要采用函数调用的形式，使用起来不是很方便，所以我选择了Vue.js .Vue.js是一个轻量高效的库，它没有像有角的的模块、控制器、范围、工厂、服务这种原料药，核心就是一个模型绑定功能。大小只有70kb，gzip压缩后只有25kb，非常轻量化。

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

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

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

script src=' http : ~/Scripts/vue。js '/script脚本类型=' text/JavaScript '//视图模型var viewModel={ FlightNo: ' '，乘客：[{ element id : ' people _ 1 '，名称： ' '，IdNo: '' } ] } //模型绑定new Vue({ el: '#app '，data: viewModel，methods : { remove passenger : function(element id){ for(var I=0；我查看模型。乘客。长度；i ) { if (viewModel .乘客[我]。元素id==元素id){ viewModel .乘客。拼接(一，1)；} } }，add passenger : function(){ var TB=document。getelementsbytagname(' table ')[0]；var指数=TB。行数[TB。行。长度-1].getElementsByTagName('输入')[0].getAttribute('id ').split(' _ ')[1]；视图模型.仁科。push({ name : ' '，IdNo: ' '，元素id : ' people _ '(索引1)});}，submitForm:函数(){ var jsonString=JSON。stringify(viewModel)；文件。getelementbyid(' viewModel ').value=jsonString返回真；} } });/script然后，在视图中使用Vue.js绑定：

表单操作='/Order2/NewPost '方法=' POSt ' div id=' app ' style=' width :680 px ' div class=' form-group '标签航班/label br/输入v-model=' FlighNo ' type=' text ' placeholder='航班号//div div class='form-group '标签乘机人/标签表TD中“乘客”的“乘客”车身tr-v姓名：/td tdinput v-model='passenger .姓名" v-bind:id="乘客元素id ' type=' text '/TD/TD身份证号：/td tdinput v-model='passenger .IdNo ' type=' text '/TD TD a href=' JavaScript :click=' removePassenger(乘客元素标识)删除/a/TD/tr/t body/table div style=' margin-top :10 px ' a href=' JavaScript :click="添加乘客"添加乘机人/a/div div style=' margin-top :10 px '输入类型=' Submit ' class=' BTN BTN-默认' v-: click=' Submit FORm '/a/div/div输入类型=' hidden ' id=' viewModel ' name=' viewModel '/表单最后在控制器里，我们反序列化即可得到对应的C#强类型模型：

[httpset]public action result NewPost(){ var jsonString=Request。表单[' viewModel ']；模特。OrderModel model=Newtonsoft。Json.JsonConvert .反序列化object models . order model(jsonString)；如果(模型！=null) { //我们这里的代码.}返回RedirectToAction('Index '，' Home ')；}动态数组绑定可以通过两种方式实现。第一种方式，用js代替占位符，表单中的元素用[index]命名。属性名，然后MVC默认模型绑定器转换模型。

第二，使用Vue.js直接绑定模型，提交表单时将模型序列化为json字符串，然后在后端反序列化，最后得到一个强类型模型。

以上就是本文的全部内容，希望对大家的学习有所帮助。