在 ASP.NET Razor 页面中将 JSON 从 JavaScript 发送到 C# 时出现 400 错误请求

Question

我尝试将 JSON 数据从 JavaScript 发送到 ASP.NET Razor Pages 项目中的 C# 代码，但我不断收到“400 Bad Request”错误。目标是在 C# 后端解析和处理数据。下面是我的 JavaScript 和 C# 代码：

JavaScript代码：

const data = [
    {
        "customer_name": "Abdullah Al Mahmud",
        "mobile": 7654,
        "bookName": "Physics 1st paper",
        "unit_price": 250,
        "quantity": 1,
        "discount": 0,
        "total": 250
    },
    {
        "customer_name": "Abdullah Al Mahmud",
        "mobile": 7654,
        "bookName": "Physics 1st paper",
        "unit_price": 250,
        "quantity": 6,
        "discount": 0,
        "total": 1500
    }
];

$.ajax({
    url: '/Index',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ data }), 
    success: function(result) {
        console.log(result);
    }
});

C#代码：

public class IndexModel : PageModel
{
    [BindProperty]
    public List<OrderData> Orders { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        using (var reader = new System.IO.StreamReader(Request.Body))
        {
            var body = await reader.ReadToEndAsync();
            Orders = JsonConvert.DeserializeObject<List<OrderData>>(body);
            foreach (var order in Orders)
            {
                System.Diagnostics.Debug.WriteLine($"Customer: {order.CustomerName}, Book: {order.BookName}, Total: {order.Total}");
            }
        }

        return new JsonResult(new { message = "Data received successfully", orders = Orders });
    }
}

public class OrderData
{
    [JsonProperty("customer_name")]
    public string CustomerName { get; set; }

    [JsonProperty("mobile")]
    public int Mobile { get; set; }

    [JsonProperty("bookName")]
    public string BookName { get; set; }

    [JsonProperty("unit_price")]
    public decimal UnitPrice { get; set; }

    [JsonProperty("quantity")]
    public int Quantity { get; set; }

    [JsonProperty("discount")]
    public decimal Discount { get; set; }

    [JsonProperty("total")]
    public decimal Total { get; set; }
}

在浏览器的网络选项卡中，我可以看到请求正在发送，但服务器响应 400 Bad Request。 我尝试过的：

1. 我已确保 JavaScript 以 JSON 形式发送数据。
2. 我尝试用 C# 读取请求正文并使用 JsonConvert.DeserializeObject 对其进行反序列化。
3. 我在 AJAX 请求中添加了 contentType: 'application/json'。

潜在问题：我怀疑该问题可能与我发送数据的方式有关。在 JavaScript 中，我使用数据键将对象数组包装在一个对象中，但这可能会导致后端期望格式的问题。

问题：

• 我在这里缺少什么可能导致 400 错误请求？
• 我应该以不同的方式构造 JavaScript 请求还是调整我的 C# 代码以正确处理传入数据？ 如有任何帮助，我们将不胜感激！

Answer 1

您正在发送带有数据密钥的对象，但 C# 代码需要直接列表。更新您的 JavaScript 以发送数组而不包装它。

$.ajax({
    url: '/Index',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),  // No wrapping object
    success: function(result) {
        console.log(result);
    }
});

你也需要改变你的方法。

public async Task<IActionResult> OnPostAsync([FromBody] List<OrderData> orders)
    {
        Orders = orders;

        foreach (var order in Orders)
        {
            System.Diagnostics.Debug.WriteLine($"Customer: {order.CustomerName}, Book: {order.BookName}, Total: {order.Total}");
        }

        return new JsonResult(new { message = "Data received successfully", orders = Orders });
    }