[英]Error while posting data (Post request) in Asp.Net Core Web API with Angular 9
I am getting an error in post request in Angular.我在 Angular 的 post 请求中遇到错误。 I am using Bootstrap data-toggle modal for a popup
我正在使用 Bootstrap 数据切换模式进行弹出
Data HTML: Parent: When i click botton onEdit(), the popup window open by displaying Edit Html page.数据 HTML:父:当我单击按钮 onEdit() 时,弹出窗口通过显示 Edit Html 页面打开。
<tr *ngFor="let data of recData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.division}}</td>
<td>{{data.total2}}</td>
<td>
<button class="btn btn-primary small btn-sm mr-1" (click)="onEdit()" //<-- How to pass Id
data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
</button>
</td>
Data TS:数据TS:
onEdit(){
this.dialog.open(EditCollComponent);
}
Edit HTML: Child It is a popup window in Data.html编辑 HTML: Child这是 Data.html 中的一个弹出窗口
<form [formGroup]="editCollectionForm" autocomplete="off" (submit)="onSubmit()">
<div class="form-row">
<div class="form-group col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">ID</span>
</div>
<input type="number" formControlName="Id" class="form-control" style="background-
color:rgb(255, 159, 128);" required >
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>User Name</span>
</div>
<input type="text" formControlName="Name" class="form-control">
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>Date</span>
</div>
<input type="date" formControlName="PostDateTime" class="form-control">
</div>
//etc..
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>Net Amount</span>
</div>
<input type="number" formControlName="Total2" class="form-control" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary" >Reset</button>
<button type="submit" class="btn btn-primary">Update changes</button>
</div>
</form>
Edit ts:编辑 ts:
ngOnInit(): void {
this.editCollectionForm = this.fb.group(
{
Id:null,
PostDateTime:null,
Division:null,
Name:null,
NetCash:null,
CellPay2:null,
Card2:null,
PhonePay2:null,
Ecom2:null,
Other2:null,
Total2:null,
});
}
onSubmit(){
console.log(this.editCollectionForm.value);
this.salesService.editData(this.editCollectionForm.value).subscribe(
(res: any) => {
console.log(this.editCollectionForm.value);
this.editSalesColl = res;
console.log(this.editSalesColl);
},
err => {
if (err.status == 400)
this.toastr.error('Invalid User Input !!', 'Authentication failed.');
else
this.toastr.error('Network error', 'Authentication failed.');
//this.loadSpinner.hide();
}
);
}
Service ts: data:EditsalesClass is class服务 ts: data:EditsalesClass 是类
editData(data:EditsalesClass){
return this.http.post('https://localhost:44372/api/Report/EditSalesCollection', data);
}
Its a post method它是一种 post 方法
When i send data from Postman it works 200 Ok but not worked with angular form (Error:POST https://localhost:44372/api/Report/EditSalesCollection 400) Why i am not able to send data in Controller in asp.net core web api but It works in Postman.当我从 Postman 发送数据时,它可以工作 200 Ok 但不能使用角度形式(错误:POST https://localhost:44372/api/Report/EditSalesCollection 400)为什么我无法在 asp.net 核心的控制器中发送数据web api 但它适用于 Postman。
Any thing is wrong with this code??
这段代码有什么问题吗?? Please help me to solve this..
请帮我解决这个..
I am using Sql Procedure to update data..我正在使用 Sql 过程来更新数据..
How can i pass id after click in edit button??
单击编辑按钮后如何传递 id? See above code in Data html..
请参阅数据 html 中的上述代码..
First, you can add the id to the button attribute data_id
,and pass $event to the onEdit function:首先,您可以将 id 添加到按钮属性
data_id
,并将$event传递给 onEdit 函数:
<button class="btn btn-primary small btn-sm mr-1" (click)="onEdit($event)"
id="{{data.id}}" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
</button>
Data TS:数据TS:
onEdit(event){
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue; // here is the id value
this.dialog.open(EditCollComponent);
}
Here is the debug result:下面是调试结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.