komunikacja frontend-backend nie działa

0

Witam, zaczynam uczyć się tworzyć aplikacje w asp.net, w tym celu postanowiłem napisać prostą aplikację zapisującą do bazy danych podane ćwiczenie, liczbę powtórzeń i wagę. skorzystać do tego chciałbym z entity framework. Utworzyłem w htmlu 3 inputy i jeden przycisk. powiązałem inputy z polami klasy zrobionej w typescripcie a przycisk z poleceniem które teoretycznie powinno przesyłać dane do kontrolera i zapisywać w bazie. Tu pojawia się problem, ponieważ to nie działa, szukam odpowiedzi już 2 dni, jednak nie wychodzi mi to. Ustawienie breakpointu pokazuje mi, że kontroler nic nie dostaje, jednak nie mam pojęcia dlaczego. Czy ktoś mógł by mi pomóc? Dodaję kod kontrolera komponentu, htmla i klasy w ts.
komponent:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { WorkoutDto } from '../Models/workout-dto.model';



@Component({
  selector: 'app-workout',
  templateUrl: './workout.component.html',
  styleUrls: ['./workout.component.css']
})
export class WorkoutComponent implements OnInit {

  workoutDto = new WorkoutDto();

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }
  
  SendRequest() {
    this.http.post("http://localhost:44362/" + "workout" + "/addworkout", this.workoutDto)
  }
  


}

kontroler:

using Microsoft.AspNetCore.Mvc;
using WorkoutApp.Database;
using WorkoutApp.Database.Repositories;
using WorkoutApp.Dtos;

namespace WorkoutApp.Controllers
{
    [ApiController]
    [Route ("workout")]
    public class WorkoutController : ControllerBase
    {
        private readonly IWorkoutRepository workoutRepository1;
        public WorkoutController(IWorkoutRepository workoutRepository)
        {
            workoutRepository1 = workoutRepository;
        }
        [HttpPost]
        [Route("addworkout")]
        public IActionResult AddWorkout([FromBody] WorkoutDto workoutDto)
        {
            var workout = new WorkoutEntity()
            {
                WorkoutName = workoutDto.WorkoutName,
                Count = workoutDto.Count,
                Weight = workoutDto.Weight
            };
            var save = workoutRepository1.Add(workout);
            return Ok(save);
        }

    }
}

klasa ts:

export class WorkoutDto {
  WorkoutName: string;
  Count: number;
  Weight: number;
}
<p>Ćwiczenie</p>
<input [(ngModel)]="workoutDto.WorkoutName" />
<p>Obciążenie</p>
<input [(ngModel)]="workoutDto.Count" />
<p>Powtórzenia</p>
<input [(ngModel)]="workoutDto.Weight" />
<br />
<button (click)="SendRequest()">Zapisz</button>

0

Nie znam angulara, ale dwie rzeczy:

  1. Jesteś pewien, że w SendRequest wychodzą odpowiednie dane?
  2. Wyrzuć atrybut Route z kontrolera i metody, możesz w metodzie zostawić ścieżkę w HttpPost:
    [HttpPost("addworkout")]
  3. Jesteś pewien, że ścieżka do Twojego kontrolera to localhost/workout, a nie localhost/api/workout?
1

Używasz HTTPClienta który zwraca observable. Zasubskrybuj się do tego i sprawdz jaka przychodzi odpowiedz. W sensie HTTPStatus code

1

Nie piszę w Angularze, więc nie będę doradzał, ale żeby przetestować API to możesz skorzystać z Postmana, albo Insomnii. Wtedy miałbyś pewność po jakieś stroni jest błąd i łatwiej byłoby naprawić.

0

@szydlak: po kliknięciu w przycisk breakpoint nie pokazuje, że cokolwiek do kontrolera dotarło. Klasa WorkoutDto wygląda tak:

namespace WorkoutApp.Dtos
{
    public class WorkoutDto
    {
        public string WorkoutName { get; set; }
        public int Count { get; set; }
        public double Weight { get; set; }
    }
}

całe repo https://github.com/kubab412/WorkoutApp

1

No to znaczy, że masz problem z routingiem jednak po stronie API byc możej. Jak ktoś wyżej wspomnial najpierw postman testuj czy działa odpowiednio a potem angular. Sprawdź czy port się zgadza dla api i zastosuj wskazówki @Juhas

0
  1. [Route ("workout")] jak chcesz sie odnieść do http://localhost:44362/workout/addworkout czyli metody addworkout w kontrolerze to wpisz sobie [Route ("workout/[action]")]
  2. Ktoś juz wspomniał ze nie nasluchujesz zwrotki w angularze SendRequest() {
    this.http.post("http://localhost:44362/" + "workout" + "/addworkout", this.workoutDto).subscribe(result=>{console.log(result);});
    }
  3. Jak w angulatze robisz jakiś model to do zmiennych używaj camelCase

1 użytkowników online, w tym zalogowanych: 0, gości: 1