어떻게 우리는 C# 복잡한 목록 개체 MVC FormData에서 Jquery 통해 매핑 할 수

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) 
    { 
    } 

이

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) {}); 

하지만 내 컨트롤러 내 JQuery와 코드

입니다 컨트롤러 내 행동 방법 adModel.PartsAdModel.VehicleList의 경우 null

누군가 제발 나를 도울 수 있습니까? 작업을 바인딩 모델의 경우

Answer 1

는, 양식 데이터는이 이름 {n}가 전송하려는 차량 항목의 배열의 제로로부터 시작되는 인덱스입니다

PartsAdModel.VehicleList[{n}].VehicleBrand 

과 특성을 가져야한다.

모델 바인더는 HttpPost 작업 방법에서 사용하는 매개 변수 이름을 고려하지 않으므로 양식 데이터 항목 이름에 adModel이라는 접두사가 필요하지 않습니다.

아래 코드가 작동합니다. 난 그냥 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'); 
});