从 jquery 将数据传递到 .NET API

看起来你正在尝试使用 jQuery 和 JavaScript 将数据从 HTML 表单（包括订单详细信息表）传递到 .NET Core API 终结点。但是，您面临的问题是 orderDetail 参数未在服务器端正确填充。让我们浏览一下您的代码并确定问题所在。

在 JavaScript 代码中，您尝试将 orderDetail 数组作为 JSON 字符串附加到 formData 对象：

formData.append("orderDetail", JSON.stringify(tableData));

这在大多数情况下应该有效。但是，当您在 API 控制器操作中使用 [FromForm] 时，它期望数据采用表单格式，而不是 JSON 字符串。若要解决此问题，应修改 JavaScript 代码，以将数据作为格式正确的表单字段发送，而不是作为 JSON 字符串发送。

您可以像这样更改 JavaScript 代码：

function OnSubmit() {
  var url = "api/data/postorder1";
  var orderTableId = "orderdetail";
  var formPassqueryId = "orderform_passquery";
  const formElement = document.getElementById(formPassqueryId);

  // Create a new FormData object
  var formData = new FormData();

  // Append the form fields to the formData object
  formData.append("Name", formElement.querySelector('input[name="Name"]').value);
  formData.append("OrderCode", formElement.querySelector('input[name="OrderCode"]').value);
  formData.append("OrderAddress", formElement.querySelector('textarea[name="OrderAddress"]').value);

  // Get the order detail table data
  const table = document.getElementById(orderTableId);
  var tableData = [];
  const tableRows = table.querySelectorAll("tbody tr");
  tableRows.forEach(function(row) {
    let productCode = row.querySelector('td[data-column="productcode"]').textContent;
    let qty = row.querySelector('td[data-column="qty"]').textContent;
    tableData.push({
      ProductCode: productCode,
      Qty: parseInt(qty)
    });
  });

  // Append the orderDetail array as a serialized form field
  tableData.forEach(function(item, index) {
    formData.append(`OrderDetail[${index}].ProductCode`, item.ProductCode);
    formData.append(`OrderDetail[${index}].Qty`, item.Qty);
  });

  // Send the formData object to the API
  fetch(url, {
    method: "POST",
    body: formData
  }).then(response => {
    if (response.ok) {
      return response.text()
    }
    return response.text().then(text => {
      throw new Error(text)
    })
  })
}

在此修改后的代码中，我们手动将表单字段和数组作为表单字段附加到对象中。这应确保 .NET Core API 控制器操作中的属性正确分析数据。OrderDetailformData[FromForm]

请确保调用中的字段名称与 .NET Core API 控制器中的属性名称和类中的属性名称匹配。此外，请确保将 解析为整数，因为它在您的类中被定义为 。formData.appendOrderOrderDetailQtyintOrderDetail

我会以不同的方式执行此操作，首先，我将用 JavaScript 生成对象，然后将其作为 JSON 本身发布到 API。此外，从 API 中删除 [FromForm]。

    //get values and assign it to variables
let name = formElement.querySelector('input[name="Name"]').value;
let orderCode = formElement.querySelector('input[name="OrderCode"]').value;
let orderAddress = formElement.querySelector('textarea[name="OrderAddress"]').value;

    // Get the order detail table data
    const table = document.getElementById(orderTableId);
    var tableData = [];
    const tableRows = table.querySelectorAll("tbody tr");
    tableRows.forEach(function (row) {
        let productCode = row.querySelector('td[data-column="productcode"]').textContent;
        let qty = row.querySelector('td[data-column="qty"]').textContent;
        tableData.push({ ProductCode: productCode, Qty: parseInt(qty) });
    });
    
var obj = {
Name : name,
OrderCode : orderCode,
OrderAddress : orderAddress,
OrderDetail : tableData
};
    
    // Send the formData object to the API
    fetch(url, {
        method: "POST",
        body: JSON.stringify(obj)
    }).then(response => {
        if (response.ok) {
            return response.text()
        }
        return response.text()
            .then(text => { throw new Error(text) })
    }) }

这应该可以完成工作。