从jquery传递数据到.NET API

omtl5h9j  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(83)

我创建了一个简单的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) })
        }
    )
}

我运行项目,输入数据并提交。
结果命令可以返回数据,但orderDetail为空。
我试着在JavaScript中调试,他们里面有数据,我可以知道如何从表中追加orderDetail并使其工作吗?
谢谢你

uqjltbpv

uqjltbpv1#

我会这样做不同,第一,我将在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) })
    }) }

这个应该可以了

mu0hgdu0

mu0hgdu02#

看起来您正尝试使用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)
    })
  })
}

在这个修改后的代码中,我们手动将表单字段和OrderDetail数组作为表单字段附加到formData对象。这应确保数据被.NET Core API控制器操作中的[FromForm]属性正确解析。
确保formData.append调用中的字段名称与.NET Core API控制器中OrderOrderDetail类中的属性名称匹配。此外,确保Qty被解析为整数,因为它在OrderDetail类中定义为int

相关问题