从 jquery 将数据传递到 dotnet API

Question

我创建了一个简单的Web项目，想要使用jquery将数据从html传递到api 首先模型类定义如下：

public class Order
{
      public string Name { get; set; } = string.Empty;
      public string OrderCode { get; set; } = string.Empty;
      public string OrderAddress { get; set; } = string.Empty;
      public ICollection<OrderDetail> OrderDetail { get; set; } = new List<OrderDetail>();
}
    
public class OrderDetail
{
   public string ProductCode { get; set; } = string.Empty;
   public int Qty { get; set; }
}

为 apicontroller 创建此方法：

 [HttpPost("postorder1")]
 public IActionResult PostOrder1 ([FromForm] Order order)
 {
     Console.WriteLine(JsonSerializer.Serialize(order, Defaults.DefaultJsonSerializerOption));
     return Ok();
 }

景色如

@model Order

<form id="orderform_passquery">
                    <label asp-for="OrderCode" ></label>
                    <input asp-for="OrderCode" type="text" class="form-control"  />
                    <label asp-for="Name"></label>
                    <input asp-for="Name" type="text" class="form-control" />                   
                    <label asp-for="OrderAddress"></label>
                    <textarea asp-for="OrderAddress" class="form-control" ></textarea>        
                    <table id="orderdetail">
                        <thead>
                            <tr>
                                <th>Product Code</th>
                                <th>Product Code</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                               <td data-column="productcode">Item One</td>
                               <td data-column="qty">123</td>
                            </tr>
                        </tbody>
                    </table>                   
                <duv class="mt-1">
                    <button id="cmdSubmit" class="btn btn-primary">Submit</button>
                </div>    
            </form>

然后我创建这个函数的javascript

function OnSubmit() {
    var url = "api/data/postorder1";
    var orderTableId = "orderdetail";
    var formPassqueryId = "orderform_passquery";
    const formElement = document.getElementById(formPassqueryId);
    var formData = new FormData(formElement);
   
    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, qty });
    });

    formData.append("orderDetail", JSON.stringify(tableData));
    const postData = new URLSearchParams(formData);
    fetch(url, {
        method: "POST",
        body: postData 

    }).then(response => {
        if (response.ok) {
            return response.text()
        }
            return response.text()
                .then(text => { throw new Error(text) })
        }
       
    )
}

我运行项目并输入数据并提交 结果order可以返回数据，但是orderDetail为空 我尝试在 javascript 中进行调试，它们里面有数据，我可以知道如何从表中附加 orderDetail 并使其工作吗？

谢谢你

Answer 1

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

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

javascript

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

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

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

javascript

函数 OnSubmit() { var url = "api/data/postorder1"; var orderTableId = "订单详情"; 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) })
}) }

在此修改后的代码中，我们手动将表单字段和

OrderDetail

数组作为表单字段附加到

formData

对象。这应确保 .NET Core API 控制器操作中的

[FromForm]

属性正确解析数据。

确保

formData.append

调用中的字段名称与 .NET Core API 控制器中的

Order

和

OrderDetail

类中的属性名称匹配。另外，请确保

Qty

被解析为整数，因为它在

int

类中被定义为

OrderDetail

。