ASP.NETMVC中怎么绑定数组模型-创新互联

本篇文章为大家展示了ASP.NET MVC中怎么绑定数组模型，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司是一家专注网站建设、网络营销策划、微信小程序、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十多年以来，已经为数千家iso认证各业的企业公司提供互联网服务。现在，服务的数千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组，如果要进行数组模型绑定，会遇到索引断裂问题，如下示例:

数组Name在索引3处断裂，在模型绑定器解析完成后，会丢弃后面的4和5，只有0、1、2会被正确解析到对应模型中。

这种断裂在进行动态数组绑定时会经常发生。

下面，以一个案例来探讨如何进行动态数组绑定。假设有以下应用场景：

ASP.NET MVC中怎么绑定数组模型

要求能够动态地添加和删除乘机人，最终提交表单后乘机人信息要填充到视图模型中的一个数组或集合属性中，以方便我们进行后续业务处理。

方式一：使用占位符替换
第一种方式我称之为”占位符替换“，使用的是ASP.NET MVC默认的模型绑定器(DefaultModelBinder)并结合前端处理。

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

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 = "航班号" })

乘机人 @if (Model.Passengers != null && Model.Passengers.Count > 0) { for(int i = 0; i < Model.Passengers.Count; i++) { 姓名： @Html.TextBoxFor(p => Model.Passengers[i].Name) 身份证号： @Html.TextBoxFor(p => Model.Passengers[i].IdNo) 删除 } } 添加乘机人

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

// 视图模型 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; } } });

航班

乘机人

姓名：身份证号：

删除

添加乘机人

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

大橙子网站建设，新征程启航

ASP.NETMVC中怎么绑定数组模型-创新互联

其他资讯