Dotnet核心web API正在从angular表单获取Null数据
Dotnet核心web API正在从angular表单获取Null数据
提问于 2020-03-30 18:10:16
我已经创建了dotnet的核心Web Api的CRUD操作，我用postman测试了它，工作正常，然后我实现了一个角度形式的接口来获取数据并将其传递给web Api。但是我注意到我得到了一个null值的记录，在那之后web api将不能使用postman。仅当我删除由angular创建的空记录时才起作用。
这是方法类
export class AddCustomerComponent implements OnInit {
addCustomerForm: FormGroup;
constructor(private service: CustomerService, private fb: FormBuilder, private router: Router) {}
ngOnInit(): void {
this.addCustomerForm = this.fb.group({
VersionId : [null, Validators.required],
Name : [null, Validators.required],
Url : [null, Validators.required],
Dns : [null, Validators.required],
})
}
onSubmit(){
this.service.addCustomer(this.addCustomerForm.value).subscribe(data => {
this.router.navigate(["/customers"]);
})
}
}.Net核心应用编程接口控制器
[HttpPost("AddCustomer")]
public IActionResult AddCustomer([FromBody]Customer customer)
{
if (!ModelState.IsValid) return BadRequest(ModelState);
using (var context = new HrmapsMasterContext())
{
context.Customer.Add(customer);
context.SaveChanges();
return Ok();
}
}表单代码：
<div class="add-customer">
<form [formGroup]="addCustomerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="versionid" class="required">Id</label>
<input type="number" class="form-control" id="versionId" formComtrolName="versionId" placeholder="Version Id ">
</div>
<div class="form-group">
<label for="name" class="required">HR Portail</label>
<input type="text" class="form-control" id="name" formComtrolName="name" placeholder="Url">
</div>
<div class="form-group">
<label for="url" class="required">Job Portail</label>
<input type="text" class="form-control" id="url" formComtrolName="url" placeholder="Url">
</div>
<div class="form-group">
<label for="dns" class="required">DNS</label>
<input type="text" class="form-control" id="dns" formComtrolName="dns" placeholder="dns">
</div>
<button class="btn btn-success" type="submit">Add</button>
<button class="btn btn-default" [routerLink]="['/customers']">Cancel</button>
</form>
</div>下面是我的angular服务代码：
export class CustomerService {
_baseURL: string = "api/customers"
constructor(private http: HttpClient) { }
getAllCustomers(){
return this.http.get<customer[]>(this._baseURL+"/getcustomers");
}
addCustomer(Customer: customer){
const customerForAPI = {
VersionId: Customer.VersionId,
Name: Customer.Name,
Url: Customer.Url,
Dns: Customer.Dns
};
const body = JSON.stringify(customerForAPI);
console.log(body);
return this.http.post<customer>(this._baseURL +'/addcustomer/', body, { headers });
}
}这是我的web api客户模型，请注意，我使用了Entityframeworkcore对现有数据库进行反向工程
public partial class Customer
{
public Customer()
{
Pack = new HashSet<Pack>();
}
public int Id { get; set; }
public int? VersionId { get; set; }
public string Website { get; set; }
public string Twitter { get; set; }
public string Map { get; set; }
public string Fax { get; set; }
public string Name { get; set; }
public string Ceoname { get; set; }
public string Activity { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public string City { get; set; }
public string Url { get; set; }
public string Locality { get; set; }
public string Street { get; set; }
public string Town { get; set; }
public string ZipCode { get; set; }
public string ConnectionString { get; set; }
public string Dns { get; set; }
public bool? IsActive { get; set; }
public bool? IsDeleted { get; set; }
public DateTime? LicenseStartDate { get; set; }
public DateTime? LicenseEndDate { get; set; }
public Guid? GuidCustomer { get; set; }
public virtual AppVersion Version { get; set; }
public virtual ICollection<Pack> Pack { get; set; }
}
}在这里，xml post请求可以很好地与postman配合使用。
{ "id"：2078，"versionId"：null，“网站”：null，"twitter"：null，"map"：null，"fax"：null，“姓名”：null，"ceoname"：null，“活动”：null，“电子邮件”：null，“电话”：null，“城市”：null，"url"：null，"locality"：null，“街道”：null，"town"：null，"zipCode"：null，"connectionString"：null，"dns"：null，"isActive"：false，"isDeleted"：null，"licenseStartDate"：null，"licenseEndDate"：null，"guidCustomer"：null，"version"：null，"pack"：[] }
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-30 22:28:11
我错过了拼写的formControlName
Stack Overflow用户
发布于 2020-03-30 18:36:24
您可以尝试：
const headers: HttpHeaders = new HttpHeaders()
.set('Content-Type', 'application/json');
export class CustomerService {
.
.
.
addCustomer(customer: Customer) {
const customerForAPI = {
// Here your customerForAPI has to correspond to your C# customer class
VersionId: customer.versionId,
Name: customer.name,
Url: customer.url,
Dns: customer.dns
};
const body = JSON.stringify(customerForAPI);
console.log(body);
return this.http.post<Customer>(this._baseURL +'/addcustomer/', body, { headers });
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60928294
复制相关文章
相似问题
腾讯云开发者
