Asp.net 核心 3.1 - 通过 AJAX 调用使用列表 <object> 上传文件并将其发送到控制器
Asp.net Core 3.1 - Upload File with List<object> via AJAX call & send it to Controller
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)
{
}
我几乎什么都试过了。你能帮忙把这些细节发送到服务器端吗?
在控制器中,我没有从 AJAX 调用中获得任何值。
URL 是正确的,它正在调用控制器操作方法,但值返回 null。
完成这个任务的正确方法是什么,因为我已经尝试了很多方法但都没有成功。
这是一个演示:
查看:
<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();
}
结果:
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)
{
}
我几乎什么都试过了。你能帮忙把这些细节发送到服务器端吗? 在控制器中,我没有从 AJAX 调用中获得任何值。 URL 是正确的,它正在调用控制器操作方法,但值返回 null。
完成这个任务的正确方法是什么,因为我已经尝试了很多方法但都没有成功。
这是一个演示:
查看:
<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();
}
结果: