我创建了一个简单的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
并使其工作吗?
谢谢你
2条答案
按热度按时间uqjltbpv1#
我会这样做不同,第一,我将在JavaScript中生成对象,然后将其作为JSON本身发布到API。同时从API中删除[FromForm]。
这个应该可以了
mu0hgdu02#
看起来您正尝试使用jQuery和JavaScript将数据从HTML表单(包括订单详细信息表)传递到.NET Core API端点。但是,您面临的问题是orderDetail参数没有在服务器端正确填充。让我们检查一下您的代码并找出问题所在。
在您的JavaScript代码中,您尝试将orderDetail数组作为JSON字符串追加到formData对象:
这应该在大多数情况下工作。但是,当您在API控制器操作中使用[FromForm]时,它期望数据采用表单格式,而不是JSON字符串。要解决此问题,您应该修改JavaScript代码,将数据作为格式正确的表单字段发送,而不是作为JSON字符串发送。
你可以像这样修改你的JavaScript代码:
在这个修改后的代码中,我们手动将表单字段和
OrderDetail
数组作为表单字段附加到formData
对象。这应确保数据被.NET Core API控制器操作中的[FromForm]
属性正确解析。确保
formData.append
调用中的字段名称与.NET Core API控制器中Order
和OrderDetail
类中的属性名称匹配。此外,确保Qty
被解析为整数,因为它在OrderDetail
类中定义为int
。