ASP.NET 核心嵌套 IFormFile 列表始终为 null

Question

I'm trying to post a nested viewmodel which has a List<IFormFile> using a jquery AJAX post, however the IFormFile property is always null on the model.

Here is my nested Model (the IFormFile is inside the ChildModel):

public class ParentViewModel
{
   public string ParentName{ get; set; }

   public ChildModel Child{ get; set; }
}

ChildModel class:

public class ChildModel 
{
   public string ChildName{ get; set; }

   public IList<IFormFile> Images{ get; set; }
}

Controller Method:

[HttpPost]
public async Task<bool> CompleteAppointment(ParentViewModel viewModel)
{
// save logic
return true;
}

View (this is a partial view. No form here, need to pass documents on ajax call):

    @model SomeOtherViewModel
    
    <div class="row">
     //controls using SomeOtherViewModel
    </div>

    <div class="row">
      <div class="col-md-6">
          <div>
             <span class="font-weight-bold">Child Name</span><br />
             <div class="pt-2 pb-2"><input id="name" type="text" class="form-control" /></div>
             <input type="file" id="images" multiple />
           </div>
       </div>
    </div>

JavaScript Code:

function save(){

    var formData = new FormData();
    formData.append("ParentName", "Anne");
    formData.append("Child[ChildName]", "Sam");

    var files = $("#images").get(0).files;

    for (var i= 0; i< files.length; i++) {
        formData.append("Child[Images]", files[i]);
    }

    $.ajax({
            url: "FamilyController/Save",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {}
     );
}

viewModel.ChildModel.Images is always null. I have tried formData.append("Child[Images][i]", files[i]); , Adding IFormFile to a wrapper class then use it in the child, and few other options. But none works.

However, the wired thing is if I add public IList<IFormFile> Images{ get; set; } public IList<IFormFile> Images{ get; set; } public IList<IFormFile> Images{ get; set; } to ParentViewModel and append as formData.append("Images", files[i]); , files become available in controller.

What am I missing here? I really appreciate any help.

Answer 1

Here is a demo worked:

Controller:

public IActionResult ModalPartial() {
            return View();
        }
        public IActionResult Save(ParentViewModel pdata) {
            return View();
        }

ModalPartial.cshtml:

<div class="row">
    <div class="col-md-6">
        <div>
            <span class="font-weight-bold">Child Name</span><br />
            <div class="pt-2 pb-2"><input id="name" type="text" class="form-control" /></div>
            <input type="file" id="images" multiple />
        </div>
        <button onclick="save()">save</button>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        function save(){
            var pdata = new FormData();
            pdata.append('ParentName', 'Anne');
            pdata.append('Child.ChildName', 'Sam');
           
                var files = $("#images").get(0).files;
            for (var i = 0; i < files.length; i++) {
                pdata.append('Child.Images', files[i]);
            }
            
          

            $.ajax({
                url: "Save",
                type: "POST",
                data: pdata ,
                processData: false,
                
                contentType: false,
                success: function (data) { }
            });
    }
    </script>
}        

result: