Привязать вложенный объект от углового к вебапи - PullRequest
Новая
       51

Привязать вложенный объект от углового к вебапи

0 голосов
/ 10 ноября 2018

Я пытаюсь отправить данные из углового приложения в метод «Добавить» webapi в формате xml. Я могу связать обычные свойства, но объект Phone вложенного типа не привязывается. Помогите, пожалуйста, связать объект Phone с моделью webapi.

enter image description here

Ниже мой код: -

PatientModel.ts 

export class Patient {
    PatientId: string;
    FirstName: string;
    Phone: TelephoneNumber;
}

export class TelephoneNumber {
    CellPhone: number;
}

Add-Patient.component.ts 

ngOnInit() {
    this.addForm = this.formBuilder.group({
    PatientId: ['', Validators.required],
    FirstName: ['', Validators.required],
    Phone: this.formBuilder.group({
      CellPhone:['',Validators.pattern("[0-9]\\d{9}")]
    })
  });
};

this.patientService.addPatient(this.addForm.value)
      .subscribe( data => {
       this.router.navigate(['patient']);
  });

Patient.service.ts 

 addPatient(patient: Patient) {
   const postedData =`<Patient  
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
   xmlns:xsd="http://www.w3.org/2001/XMLSchema">    
   <PatientId>${patient.PatientId}</PatientId>
   <FirstName>${patient.FirstName}</FirstName>
   <Phone>
   <CellPhone  xsi:nil="true">${patient.Phone.CellPhone}</CellPhone>
   </Phone>
  </Patient>`

  let httpHeaders = new HttpHeaders();
  httpHeaders = httpHeaders.append('Content-Type', 'text/xml');
  httpHeaders = httpHeaders.append('Accept', 'text/xml');

  return this.http.post(this.baseUrl+"/add" ,postedData , { headers: 
         httpHeaders });
}

add.patient.component.html 

 <form [formGroup]="addForm" (ngSubmit)="onSubmit()">
   <div class="form-group" formGroupName="Phone"> 
      <label for="CellPhone">Cell Phone:</label>
      <input formControlName="CellPhone" placeholder="Cell Phone"  
       class="form-control" [ngClass]="{ 'is-invalid': submitted && 
       f['Phone'].controls['CellPhone'].errors }">
          <div *ngIf="submitted && f['Phone'].controls['CellPhone'].errors" 
               class="invalid-feedback">
          </div>
   </div>
   <button class="btn btn-success">Save</button>
 </form>

Метод контроллера WebApi 

[HttpPost]
    public IHttpActionResult Add(Patient p)
    {
        int response =this._patientService.AddPatient(p);
        if (response == -1)
            return Conflict();
        else
            return Ok("Data posted successfully");
    }

Класс пациента 

public class Patient
{
    public string PatientId { get; set; }
    public string FirstName { get; set; }
    public TelephoneNumber Phone { get; set; }
}
public class TelephoneNumber
{
    public int? CellPhone { get; set; }
}

1 Ответ

0 голосов
/ 11 ноября 2018

Проверьте сетевой запрос через Fiddler, если все значения передаются на сервер Web API. Если все передается по сети, пожалуйста, используйте связыватель модели для вашего сложного типа 

    [HttpPost]
    public IHttpActionResult Add([ModelBinder(typeof(PatientBinder))]Patient p)
    {
    }

О том, как реализовать связыватели моделей, см. Ниже URL

https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

https://www.c -sharpcorner.com / статьи / параметр связывания-в-Asp-сетчатой ​​веб-апи /

...