[英]Angular: Bad Request error when calling post
Using Angular 6 & C# here. 在这里使用Angular 6和C#。
On the button click event of my form I want to save the data. 我要在表单的按钮单击事件上保存数据。 The event calls an API which saves the data.
该事件将调用保存数据的API。
Below is my button click event: 以下是我的按钮单击事件:
submitData() {
//After getting form values I create an object as below
let myData =
{
"name":name,
"date": date,
"status": status,
"selection":selection,
"createdBy": createdBy
};
this.myService.save(myData)
.subscribe(
(jsonData) => {
//redirect etc after save
});
}
In my above event selection itself holds array of objects as: 在我上面的事件中,选择本身将对象数组保存为:
0: {name: "u1", id: "123", type:"dev", comment: "comment1"}
1: {name: "u2", id: "456", type:"prd", comment: "comment2"}
Also below is my service call: 以下是我的服务电话:
saveExtract(data) {
return this.httpClient.post<any>(this.url + '/Save', data)
.pipe(
catchError())
);
} }
Finally below is my c# api; 最后是我的C#API;
[HttpPost("Save", Name = "Save")]
public async Task Save([FromBody] SaveModel data)
{
//do save here etc
}
But above code returns me 400 (Bad Request) error. 但是上面的代码返回了我400(错误请求)错误。
I even try to put the breakpoint in my api but its never hit. 我什至尝试将断点放在我的api中,但从未成功。
So looks like something is wrong while I call my post. 所以当我打电话给我时,好像出了点问题。
Can Anyone point out the issue? 任何人都可以指出问题吗?
Thanks 谢谢
---Updated--- - -更新 - -
So I was missed out the code to pass httpOptions and using Json.stringify. 因此,我错过了通过httpOptions并使用Json.stringify的代码。 After passing it partially works as below:
通过之后,它的部分工作原理如下:
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
saveExtract(data) {
return this.httpClient.post<any>(this.url + '/Save', data, httpOptions)
.pipe(
catchError())
);
this.myService.save(JSON.stringify(myData))
.subscribe(
(jsonData) => {
//redirect etc after save
});
The above code works when I comment out the selection array which is a part of my data to be passed to the API. 当我注释掉选择数组时,上面的代码有效,这是我要传递给API的数据的一部分。 But does not work and gives bad request error when I pass selection array.
但是不起作用,并且在我通过选择数组时给出了严重的请求错误。
So can anyone point how can I pass array of object to it. 所以任何人都可以指出如何将对象数组传递给它。
Here is a working demo with sending array to .net core, check the differences from your code. 这是一个将数组发送到.net核心的有效演示,请检查与代码之间的差异。
Client Angular 客户角度
export class FetchDataComponent {
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
let selection = [{ "name": "n1", "id": 1 }, { "name": "n2", "id": 2 }, { "name": "n3", "id": 3 }];
let myData =
{
"name": "Tom",
"selection": selection,
};
http.post<any>(baseUrl + 'api/SampleData/Save', myData).subscribe(result => {
});
}
}
Serser side. Serser一侧。
[Route("api/[controller]")]
public class SampleDataController : Controller
{
[HttpPost("Save", Name = "Save")]
public async Task Save([FromBody] SaveModel data)
{
//do save here etc
}
}
public class SaveModel
{
public string Name { get; set; }
public List<MySelection> Selection { get; set; }
}
public class MySelection
{
public int Id { get; set; }
public string Name { get; set; }
}
One More Node, you could add code below in Startup.cs
to avoid api model validation filter. 一个更多的节点,您可以在
Startup.cs
添加以下代码,以避免api模型验证过滤器。
services.AddMvc()
.SetCompatibilityVersion(CompatibilityVersion.Version_2_2)
.ConfigureApiBehaviorOptions(options =>
{
options.SuppressModelStateInvalidFilter = true;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.