AJAX Post 大量 JSON 对象返回 NULL

Question

我试图在我的控制器上从一组 JSON 对象生成一个 excel 文件。我只传递了一个 JSON 对象，而我使用的相同方法似乎不适用于列表或 JSON 数组。

AJAX 生成对象：

    $.ajax({
        type: "GET",
        url: '/home/GetInfoToExportCalgary',
        success: function (data) {
            //console.log(data);
            CalgaryBookingInfo = data;

            for (var i = 0; i < CalgaryBookingInfo.length; i++) {
                if (CalgaryBookingInfo[i].length != 0) {
                    //console.log(CalgaryBookingInfo[i][0].Company + " has bookings")

                    var SumTime = 0;
                    for (var j = 0; j < CalgaryBookingInfo[i].length; j++)
                    {
                        CalgaryNotNullBookings.push({
                            Company: CalgaryBookingInfo[i][j].Company,
                            Location: CalgaryBookingInfo[i][j].Location,
                            PaidHours: CalgaryBookingInfo[i][j].HoursPaid,
                            Start: CalgaryBookingInfo[i][j].Start,
                            End: CalgaryBookingInfo[i][j].End,
                            Time: CalgaryBookingInfo[i][j].Time,
                            Total: SumTime + CalgaryBookingInfo[i][j].Time
                        });
                        SumTime += CalgaryBookingInfo[i][j].Time;
                    }

                    CalgaryNotNullBookings.push({
                        Company: "",
                        Location: "",
                        PaidHours: "",
                        Start: "",
                        End: "",
                        Time: "",
                        Total: SumTime
                    });
                }
            }
            console.log(CalgaryNotNullBookings);
            //buildHtmlTable(RetreivedClients);
        }
    })

AJAX 发送数组：

在这里，我只是发送一个 POST，其中包含我事先生成的数据并在单击按钮时调用。

    function ExportCalgary(data) {
        $.ajax({
            type: "POST",
            url: '/home/ExportCalgary',
            data: data,
            success: function (data) {
                console.log("huehuehuehuehueh");
                if (data.status) {
                    //Refresh the calender
                    //location.reload();
                    $('#myModalSave').modal('hide');
                }
            },
            error: function () {
                alert('Failed');
            }
        })
    }

控制器POST功能：

[HttpPost]
public JsonResult ExportCalgary(List<ClientBookingInfo> e)
{
    var status = false;

    //string[] columns = { "Company", "Location", "PaidHours", "Start", "End", "Time" , "Total" };
    //byte[] filecontent = ExcelExportHelper.ExportExcel(dataToConvert, "Technology", true, columns);
    //return File(filecontent, ExcelExportHelper.ExcelContentType, "CalgaryClientInfo_" + DateTime.Now.Year+"_" + DateTime.Now.Month + ".xlsx");

    ExcelPackage excel = new ExcelPackage();
    var workSheet = excel.Workbook.Worksheets.Add("Sheet1");
    workSheet.TabColor = System.Drawing.Color.Black;
    workSheet.DefaultRowHeight = 12;
    //Header of table  
    //  
    workSheet.Row(1).Height = 20;
    workSheet.Row(1).Style.HorizontalAlignment = ExcelHorizontalAlignment.Center;
    workSheet.Row(1).Style.Font.Bold = true;
    workSheet.Cells[1, 1].Value = "Company";
    workSheet.Cells[1, 2].Value = "Location";
    workSheet.Cells[1, 3].Value = "PaidHours";
    workSheet.Cells[1, 4].Value = "Start";
    workSheet.Cells[1, 5].Value = "End";
    workSheet.Cells[1, 6].Value = "Time";
    workSheet.Cells[1, 7].Value = "Total";
    //Body of table  
    //  
    int recordIndex = 2;
    for(int i = 0; i < e.Count; i++)
    { 
        workSheet.Cells[recordIndex, 1].Value = e[i].Company;
        workSheet.Cells[recordIndex, 2].Value = e[i].Location;
        workSheet.Cells[recordIndex, 3].Value = e[i].PaidHours;
        workSheet.Cells[recordIndex, 4].Value = e[i].Start;
        workSheet.Cells[recordIndex, 5].Value = e[i].End;
        workSheet.Cells[recordIndex, 6].Value = e[i].Time;
        workSheet.Cells[recordIndex, 7].Value = e[i].Total;
        recordIndex++;
    }
    workSheet.Column(1).AutoFit();
    workSheet.Column(2).AutoFit();
    workSheet.Column(3).AutoFit();
    workSheet.Column(4).AutoFit();
    workSheet.Column(5).AutoFit();
    workSheet.Column(6).AutoFit();
    workSheet.Column(7).AutoFit();
    string excelName = "CalgaryClientInfo_" + DateTime.Now.Year+"_" + DateTime.Now.Month;
    using (var memoryStream = new MemoryStream())
    {
        Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        Response.AddHeader("content-disposition", "attachment; filename=" + excelName + ".xlsx");
        excel.SaveAs(memoryStream);
        memoryStream.WriteTo(Response.OutputStream);
        Response.Flush();
        Response.End();

        status = true;
    }



    return new JsonResult { Data = new { status = status } };
}

目前，当我调试时，列表 "ClientBookingInfo e" 返回 NULL，我不确定可能出了什么问题。可能与 JSON 的编码或数据类型有关吗？我是否遗漏了一些指定我发送的 JSON 将是一个数组的行？

这里还有 ClientBookingInfo 类：

public class ClientBookingInfo
{
    public string Company { get; set; }
    public string Location { get; set; }
    public int PaidHours { get; set; }
    public DateTime Start { get; set; }
    public DateTime End { get; set; }
    public int Time { get; set; }
    public double Total { get; set; }
}

提前致谢！ :)

Answer 1

发布复杂数据时，您应该发送对象的 JSON 字符串化版本，同时将 contentType 指定为 application/json

您可以使用JSON.stringify 方法将您的数组转换为它对应的json字符串。

var data = [];
data.push({ Company: "Microsoft", Location: "Redmond" , Total:123 });
data.push({ Company: "UrbanScience", Location:"Detroit", Total:456 });

$.ajax({
    type: "POST",
    url: '@Url.Action("ExportCalgary")',
    data: JSON.stringify(data),
    contentType: "application/json",
    success: function(data) {
        console.log("data :", data);
        // Do something with the response
    },
    error: function() {
        alert('Failed');
    }
});

现在模型绑定器将能够正确绑定来自您的 ajax 请求的数据，并且您将不会在您的操作方法参数中获得 null。

附带说明，通过 ajax 下载文件可能不起作用。考虑向可以返回文件的操作方法提交普通（非 ajax）表单。此外，如果构建文件所需的数据在服务器代码中可用（假设它在您可以读取的 db 表中），我建议您将所需的最少数据（如 uniqueId ）发送到服务器和让服务器读取数据并使用此 ID 并使用它返回文件。

如果您可以将 id 传递给可以返回文件的操作方法，则可以使用 window.open 方法从 javascript 调用它。

window.open("/Documents/Download?id=2");

或者将当前url设置为下载url

window.location.href = "/Documents/Download?id=2";

假设您有一个 Download 操作方法，它接受一个 id 参数并返回一个文件。