ASP.NET Core 嵌套的 IFormFile 列表始终为空答案

【问题标题】：ASP.NET Core nested IFormFile list is always nullASP.NET Core 嵌套的 IFormFile 列表始终为空
【发布时间】：2020-07-09 17:09:26
【问题描述】：

我正在尝试使用 jquery AJAX 帖子发布具有List<IFormFile> 的嵌套视图模型，但是模型上的 IFormFile 属性始终为空。

这是我的嵌套模型（IFormFile 在 ChildModel 中）：

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

   public ChildModel Child{ get; set; }
}

ChildModel 类：

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

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

控制器方法：

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

视图（这是部分视图。这里没有表单，需要在ajax调用时传递文档）：

    @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 代码：

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 始终为空。我尝试过formData.append("Child[Images][i]", files[i]);，将IFormFile 添加到包装类中，然后在子类中使用它，以及其他几个选项。但没有一个有效。

但是，有线的事情是，如果我将 public IList<IFormFile> Images{ get; set; } 添加到 ParentViewModel 并附加为 formData.append("Images", files[i]); ，文件将在控制器中可用。

我在这里缺少什么？非常感谢任何帮助。

【问题讨论】：

你能告诉我们你的看法吗？即，您如何构建表单、图像上传输入等。
@DavidLiang 添加了视图

标签： javascript jquery ajax asp.net-core-mvc asp.net-core-3.1

【解决方案1】：

这是一个演示：

控制器：

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

结果：

【讨论】：