ajax - Asp.net Core 3.1 - 上传带有列表的文件

Question

public Class MainModel
{
    public IFormFile PDF { get; set; }

    public List<TempModel> List1{ get; set; }

    public List<TempModel1> List2 { get; set; }
}

public class TempModel
    {
        public string Prop1{ get; set; }
        public string Prop2{ get; set; }
    }
    public class TempModel1
    {
        public string Prop1{ get; set; }
        public string Prop2{ get; set; }
        public List<TempModel> list1 { get; set; }
    }

function AJAXCall()
{
var list1 = [{Prop1: "abcd",Prop2: "abcd1"},{Prop1: "abcd123",Prop2: "abcd456"}]

var list2 = [{Prop1: "abcd",Prop2: "abcd1",list1:list1 },{Prop1: "abcd123",Prop2: "abcd456",list1:list1}]
 formData.append("PDF", files[i]);
 formData.append("List1", list1);
 formData.append("List2", list2);
$.ajax({
            type: "POST",
            url: url,
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }

        });
}

 public IActionResult Save([FromBody] MainModel model, IFormFile PDF)
{

}

I tried almost everything. Can you please help to get these details to be sent to the server-side? In Controller, I am not getting any values from AJAX Call. URL is correct, it is hitting the Controller Action Method but values are returning null.

What is the correct way to accomplish this task as I Have tried many things but it did not work out.

score 1 · Accepted Answer

这是一个演示：

看法：

<input type="file" id="images" multiple />
<button onclick="AJAXCall()">ajax</button>
@section scripts{
    <script>
        function AJAXCall() {
            var formData = new FormData();
            var files = $("#images").get(0).files;
            formData.append('PDF', files[0]);
            
            var list1 = [{ Prop1: "abcd", Prop2: "abcd1" }, { Prop1: "abcd123", Prop2: "abcd456" }]

            var list2 = [{ Prop1: "abcd", Prop2: "abcd1", list1: list1 }, { Prop1: "abcd123", Prop2: "abcd456", list1: list1 }]
            for (var i = 0; i < list1.length; i++) {
                formData.append("List1[" + i + "].Prop1", list1[i].Prop1);
                formData.append("List1[" + i + "].Prop2", list1[i].Prop2);
            }
            for (var i = 0; i < list2.length; i++) {
                formData.append("List2[" + i + "].Prop1", list2[i].Prop1);
                formData.append("List2[" + i + "].Prop2", list2[i].Prop2);
                for (var j = 0; j < list1.length; j++) {
                    formData.append("List2[" + i + "].list1[" + j + "].Prop1", list1[j].Prop1);
                    formData.append("List2[" + i + "].list1[" + j + "].Prop2", list1[j].Prop2);
                }
            }
            $.ajax({
                type: "POST",
                url: "Save",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                }

            });
        }
    </script>
}

控制器：

public IActionResult Save(MainModel model)
        {
            return Ok();
        }

结果：

1 回答 1

Related

Reference