我们如何通过Jquery从MVC中的FormData映射c＃复杂列表对象

Question

我的控制器中有一个列表对象。我需要将此List对象与从FormData进行的Ajax调用中传递给控制器​​的数据进行映射。我使用FormData的原因是，我需要在同一个ajax调用中从视图中获取一些文件。

请在下面找到我的代码

 public class AdModel
{
    public PartsAd PartsAdModel { get; set; }
    public List<HttpPostedFileBase> AdImages { get; set; }
}
public class PartsAd
{
    public List<Vehicle> VehicleList { get; set; }
}
public class Vehicle
{
    public string VehicleBrand { get; set; }
}

下面是我在控制器中的动作方法

 public ActionResult AjaxPostAd(AdModel adModel)
    {
    }

下面是我的Jquery代码

var applicableVehicleBrands = $('#multiSelectApplicableVehicleBrand option:selected');
    var selectedBrand = 0;
    $(applicableVehicleBrands).each(function () {
        data.append("adModel[PartsAdModel.VehicleList[" + selectedBrand + "].VehicleBrand]", $(this).val())
        selectedBrand = selectedBrand + 1;
    });
 $.ajax({
    cache: false,
    type: "post",
    async: true,
    url: "" + ajaxPostURL + "",
    data: data,
    contentType: false,
    processData: false,
    success: function (data) {});

但是在我的控制器中，当我查找adModel.PartsAdModel.VehicleList时，它为null

有人能帮帮我吗？

Answer 1

要使模型绑定起作用，表单数据应具有此名称的属性

PartsAdModel.VehicleList[{n}].VehicleBrand

其中{n}是您要发送的车辆物品数组的零基指数。

您不需要在formd数据项名称中使用adModel前缀，因为模型绑定器不关心您在HttpPost操作方法中使用的参数名称。

以下代码应该有效。我刚刚为VehicleList属性编写了2个项目。您可以更新它，以便它根据您的DOM输入动态添加项目（在循环中）。

var data = new FormData();

data.append("PartsAdModel.VehicleList[0].VehicleBrand", "Honda");
data.append("PartsAdModel.VehicleList[1].VehicleBrand", "Toyota");

// Add the uploaded file
// Assuming you have a file input with name="AdImages"
$('input[name="AdImages"]').each(function(a, b) {
    var fileInput = $('input[name="AdImages"]')[a];
    if (fileInput.files.length > 0) {
        var file = fileInput.files[0];
        data.append("AdImages", file);
    }
});


$.ajax({
    type: "post",
    url: '@Url.Action("AjaxPostAd")',
    data: data,
    contentType: false,
    processData: false
}).done(function(r) {
    console.log('ajax call done');
});