Question

我已经创建了CRUD操作的dotnet核心Web Api，我用邮递员对其进行了测试并可以正常工作，然后我实现了一个有角形式的界面来获取数据并将其传递给Web Api。但是我注意到我得到了一个带有空值的记录，之后，即使是邮递员，Web api也无法使用。仅当我删除由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 Core API控制器

[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>

这是我的角度服务代码：

    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发布请求与邮递员一起工作

{ “ id”：2078， “ versionId”：null， “网站”：null， “ twitter”：null， “地图”：null， “传真”：null， “名称”：null， “ ceoname”：null， “活动”：null， “电子邮件”：null， “ phone”：null， “ city”：null， “ url”：null， “位置”：null， “街道”：null， “ town”：null， “ zipCode”：null， “ connectionString”：null， “ dns”：null， “ isActive”：false， “ isDeleted”：null， “ licenseStartDate”：null， “ licenseEndDate”：null， “ guidCustomer”：null， “版本”：null， “包装”：[] }

Answer 1

您可以尝试：

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 });
  }

Answer 2

我想念拼写的formControlName

Dotnet核心Web API正在从角度形式获取Null数据

2 个答案: