Метод Post не работает в Angular10 ASP.NET задний конец

#c# #asp.net #angular

#c# #asp.net #угловой

Вопрос:

Я не могу понять, почему мой метод POST не работает. С API все в порядке, и я думаю, что CORS тоже работает нормально, поскольку я могу получать данные из базы данных в своем браузере через Angular.

Мне сложно отлаживать, поскольку ответ об ошибке не содержит много четкой информации (по крайней мере, я не смог ее найти).

введите описание изображения здесь

Я тоже консоль.регистрация данных из формы в моем браузере, что означает, что данные отправляются правильно.

введите описание изображения здесь

Вот сообщение об API:

  [HttpPost]
        public ActionResult<Record> AddRecord(Record record)
        {
            _context.Records.Add(record);
            _context.SaveChanges();

            return Ok();
        }
  

Вот форма

 

<form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">

    <div class="form-group">
        <input 
        name="Date" 
        #Date="ngModel" 
        [(ngModel)]="service.formData.Date" 
        class="form-control" 
        placeholder="Date"
        required>
    </div>

    <div class="form-group">
        <input 
        name="Name" 
        #Name="ngModel" 
        [(ngModel)]="service.formData.Name" 
        class="form-control" 
        placeholder="Name"
        required>
    </div>

    <div class="form-group">
        <input 
        name="Value" 
        #Value="ngModel" 
        [(ngModel)]="service.formData.Value" 
        class="form-control" 
        placeholder="Value"
        required>
    </div>

    <div class="form-group">
        <input 
        name="Category" 
        #Category="ngModel" 
        [(ngModel)]="service.formData.Category" 
        class="form-control" 
        placeholder="Category"
        required>
    </div>

    <div class="form-group">
        <input 
        name="Type" 
        #Type="ngModel" 
        [(ngModel)]="service.formData.Type" 
        class="form-control" 
        placeholder="Type"
        required>
    </div>

    <div class="form-group">
        <button class="btn-success btn-lg btn-block" type="submit">Submit</button>
    </div>

</form>
  

вот компонент:

 export class RecordDetailComponent implements OnInit {

  constructor(public service: RecordDetailService) { }

  ngOnInit(): void {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form != null)
    form.resetForm();

    this.service.formData = {
      Date : "",
      Name: "",
      Value: 0 , 
      Category: "",
      Type: ""
    }
  }

  onSubmit (form: NgForm) {
    this.service.postRecordDetail(form.value).subscribe(
      res=> {
        console.log("Deu Certo Porra")
        debugger
        this.resetForm(form);
      },
      err=> {
        debugger
        console.log(err);
      }
    );
  }

}
  

Вот сервис:

 import { Injectable } from '@angular/core';
import { RecordDetail } from './record-detail.model';
import { HttpClient } from "@angular/common/http"

@Injectable({
  providedIn: 'root'
})
export class RecordDetailService {
  formData: RecordDetail
  readonly rootURL = 'http://localhost:5001/api'

  constructor(private http: HttpClient) { }

  postRecordDetail(formData: RecordDetail) {
    console.log(formData)
    return this.http.post(this.rootURL '/records', formData)
  }
}
  

Комментарии:

1. Пожалуйста, используйте вкладку Network в Chrome Developer Tools, чтобы получить точную отправленную полезную нагрузку (и поделитесь ею в своем вопросе).

2. @mjwills Я добавил пару картинок с дополнительной информацией

3. Попробуйте преобразовать поля ввода формы в экземпляр типа / интерфейса, обновите свой сервис, чтобы принять этот тип. Это позволит сохранить службу в чистоте.

4. Кроме того, используйте postman для ручной проверки работоспособности api. Наряду с предварительной проверкой параметров, все работает как ожидалось.

5. Я нашел проблему. Это было здесь: «только для чтения rootURL =’ localhost: 5001 / api ‘» … должно быть ‘https’. на это ушло два часа моей жизни: (