ASP.NET Core嵌套的IFormFile列表始终为null [英] ASP.NET Core nested IFormFile list is always null

问题描述

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

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.

这是我的嵌套模型(IFormFile在ChildModel内部):

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类:

ChildModel class:

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调用中传递文档):

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代码:

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

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.

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

However, the wired thing is if I add 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.

推荐答案

以下是一个演示示例:

控制器:

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

ModalPartial.cshtml:

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

结果:

这篇关于ASP.NET Core嵌套的IFormFile列表始终为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！