AngularJS metoda POST przekazująca dane do API C#

Odpowiedz Nowy wątek
2019-08-11 23:19
0

Hej,

Mam do was pytanie, od kilku dni ogarniam angulara, w którym zrobiłem pobieranie poprzez get, danych z webAPI które utworzyłem w C#. Dane pobierają się prawidłowo, wszystko jest cacy. Teraz chciałbym się zabrać na metodę post, stworzyłem w webAPI, odpowiednią funkcję, dodaje się bez problemu poprzez PostMan. Siedzę już kilka godzin, przeczytałem wiele artykułów i obejrzałem wiele tutoriali, ale nie mogę zaimplementować tego do angulara. Czy jest opcja aby dodawać te dane w jakiś inny sposób niż przez webClient i metodę post? Wszystko odbieram i chce zapisywać w JSON.

Jeśli potrzebny będzie kod to oczywiście wkleję, ale najpierw chciałbym wiedzieć czy nie ma jakieś innej metody od POST. Nie jestem jeszcze biegły na tyle w TypeScript. W C# zrobiłem stronę gdzie zaprogramowałem dodawanie rekordów do API i tam wszystko działa mi prawidłowo.

Pozostało 580 znaków

2019-08-13 15:57
0

Zastanawia mnie jedno, przez PostMana nie wywala kompletnie żadnego błędu przy wysyłaniu POST, a jak to robię tak jak poniżej... :

http.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Vacation } from '../vacation/vacations';
import { Observable } from 'rxjs';

@Injectable()
export class HttpService {

    constructor(private http: HttpClient) { }

    getVacations(): Observable<Array<Vacation>> {
        return this.http.get<Array<Vacation>>('https://localhost:44316/api/vacation');
    }

    addVacation(vacation: Vacation): Observable<any> {
        return this.http.post<Vacation>('https://localhost:44316/api/vacation', JSON.stringify(vacation), {
            headers: new HttpHeaders().append('Content-Type', 'application/json')});
}

}

Create.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../config/http.service';
import { Vacation } from './vacations';
import { FormGroup, FormBuilder } from '@angular/forms';
import { VirtualTimeScheduler } from 'rxjs';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit  {
  constructor(private httpService: HttpService,  private formBuilder: FormBuilder) { }

  vacation: FormGroup;
  objVacation: Vacation;

  ngOnInit() {
    this.vacation = this.formBuilder.group({
      userName: [''],
      vacationStart: [''],
      vacationEnd: [''],
      superior: ['']
    });
  }
  onSubmit() {
    console.log(this.vacation);
    console.log(this.vacation.value);
    console.log(this.vacation.value.userName);
    console.log(this.vacation.getRawValue());
    this.httpService.addVacation(this.objVacation)
     .subscribe(
       data => {
        this.objVacation = data;
       }
     );
  }
}

HTML

<form [formGroup]="vacation" (ngSubmit)="onSubmit()" novalidate>
    <h1>New vacation</h1>
    <div class="form-group">
        <div class="col-sm-12">
            <label for="userName">Name</label>
            <input name="userName" 
            type="text" 
            class="form-control" 
            id="userName" 
            placeholder="Name" 
            formControlName="userName"         
            >
            <BR>
        </div>
        <div class="col-sm-12">
                <label for="vacationS">Vacation Start</label>
                <input name="vacationStart"
                type="text" 
                class="form-control" 
                id="vacationS" 
                placeholder="Vacation Start" 
                formControlName="vacationStart"
                >
            </div>
            <div class="col-sm-12">
                    <label for="vacationE">Vacation End</label>
                    <input name="vacationEnd"
                    type="text" 
                    class="form-control" 
                    id="vacationE" 
                    placeholder="Vacation End" 
                    formControlName="vacationEnd"
                    >
                </div>
                <div class="col-sm-12">
                        <label for="superior">Superior</label>
                        <input name="superior"
                        type="text" 
                        class="form-control" 
                        id="superior" 
                        placeholder="Superior" 
                        formControlName="superior"
                        >
                    </div>          
    </div>
    <div>
        <button class="submitButton">Submit</button>
    </div>
</form>

C# webAPI:
Controller:

    public class vacationController : ApiController
    {
        public IEnumerable<vacation> Get()
        {
            using (VacationsDBEntities1 entities = new VacationsDBEntities1())
            {
                return entities.vacation.ToList();
            }
        }

        public vacation Get(int id)
        {
            using (VacationsDBEntities1 entities = new VacationsDBEntities1())
            {
                return entities.vacation.FirstOrDefault(e => e.vacationID == id);
            }
        }

        public HttpResponseMessage Post([FromBody] vacation Vacation)
        {
            try
            {
                using (var entities = new VacationsDBEntities1())
                {
                    var response = entities.newVacation(Vacation.userName, Vacation.vacationStart,Vacation.vacationEnd, Vacation.superior);

                    var message = Request.CreateResponse(HttpStatusCode.Created, Vacation);
                    message.Headers.Location = new Uri(Request.RequestUri + Vacation.vacationID.ToString());
                    return message;
                }
            }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
            }
        }
    }
}

I dostaje błąd:

screenshot-20190813155731.png

Pozostało 580 znaków

2019-08-13 16:05
0

Wytłumacz mi co chcesz tym osiągnąć JSON.stringify(vacation) ?
Skoro w api masz typ Vacation a nie String

edytowany 1x, ostatnio: Schadoow, 2019-08-13 16:06
Po prostu próbowałem już na 100 sposobów. Oczywiście próbowałem z samym vacation ale ten sam efekt. Z tego co ustaliłem to błąd 400 jest od złego formatu wejścia, dlatego próbuje to jakoś zmienić. - kain555 2019-08-13 16:08
To próbując na pałę tego nie osiągniesz teraz wysyłasz z d**y string. Wklej zawartość typu Vacation w backendzie i zawartość z zakładki network. - Schadoow 2019-08-13 16:11
Oczywiście ten stringify do wywalenia - Schadoow 2019-08-13 16:11

Pozostało 580 znaków

2019-08-13 16:26
0

screenshot-20190813162548.png

Zawartość typu Vacation, to chodzi Ci o klasę?

screenshot-20190813162625.png

Pozostało 580 znaków

2019-08-13 16:33
0

No dobrze ale prosiłem jeszcze o screen z networku. Network -> zaznacz request -> Headers -> Request Payload na dole strony.
Nie znam C# ale wypisz na backendzie przed try obiekt Vacation.

Pozostało 580 znaków

2019-08-13 16:39
0
  • zakładam po składni, że po prostu próbujesz na null'u wykonać operację o w tym miejscu.
    Vacation.vacationID.ToString()
edytowany 1x, ostatnio: Schadoow, 2019-08-13 16:40
Pokaż pozostałe 2 komentarze
Generuje po stronie bazy, ale nie ma takiej możliwości że API potrzebuje jakiejkolwiek wartości vacationID oprócz null? - kain555 2019-08-13 17:07
to czemu używasz obiektu Vacation zamiast response ? Domyślam się, że obiekt response to jest Vacation po zapisaniu do bazy więc id powinno być już uzupełnione. - Schadoow 2019-08-13 17:12
Widzę, że nie za bardzo rozumiesz co robisz ;p. Do obiektu Vacation może pójść wszystko co mapper da rade zmapować na dany obiekt. oczywiście o ile nie dasz walidacji na to co przychodzi. Także obiekt z samymi nullami też będzie prawidłowy co nie oznacza, że możesz frywolnie próbować wywoływać metody na null'u. - Schadoow 2019-08-13 17:16
Ja już od wczoraj nie wiem co robię xd, siedzę od piątku po kilkanaście godzin dziennie nad jedną rzeczą, już powoli tracę nadzieje ze najprostrza funkcja w programowaniu nie bedzie mi działała, dlatego napisałem tutaj w celu pomocy :D powiedz mi co potrzebujesz aby mi jeszcze pomóc, albo nakierować :) - kain555 2019-08-13 17:19
w sumie to już ci napisałem. Pokaż co zwraca wywołanie "entities.newVacation" tzn weź albu screena z debuggera z zwartościa albo wypisz na ekran zawartość obiektu i podeslij. - Schadoow 2019-08-13 17:24

Pozostało 580 znaków

2019-08-13 16:41
0

Nie mogę znaleźć tej opcji Request Payload

screenshot-20190813164123.png

Poszukaj dobrze bo jest tam na pewno :) użyj scrolla. Bo to jest poniżej Request Headers - Schadoow 2019-08-13 16:42

Pozostało 580 znaków

2019-08-13 17:08
0

Nic nie mam poniżej :(

screenshot-20190813170824.png

Pozostało 580 znaków

2019-08-13 17:39
0

Responce czyli entities.newVacation zwraca INT = 1 :

screenshot-20190813173931.png

Pozostało 580 znaków

2019-08-13 17:46
0

A co oznacza to "1" ?
xD @somekind może ty mu podpowiesz jak zapisać obiekt w bazie bo ja to nie ogarniam tych waszych c# konstrukcji :).

newVacation to jest procedura w bazie. Przyjmuje cztery parametry. Wywoływana jest podczas operacji POST. Po tej stronie wydaje mi się że wszystko okej. - kain555 2019-08-13 18:38
Nie rozumiem jednej rzeczy, parametry pobierają się prawidłowo z pól w HTML, widać to po wyniku z console.log. webAPI również poprawnie działa bo kiedy wyślę JSON'a poprzez PostMan to rekord dodaje się do bazy. Więc gdzie jest kurde problem. - kain555 2019-08-13 18:40
Czy ja sobie ustawiłem za duże progi na początek? Napisanie aplikacji webowej w C# która robi to co chce osiągnąć napisałem w 10min. A nad tym męczę się już 4 dni... A wydaje się taką prostą rzeczą. - kain555 2019-08-13 19:03
Czy ja wiem bardziej nie rozumiesz co wgl robisz przez co wszystko jest na pałę(np pomimo iż id jest generowane to brałeś je z requestu i operowałeś na nim =.=). Idea jest prosta jak masz generowany id przez bazy po zapisaniu musisz dostać/wziąć twój wpis. Wcześniejsze zamieszanie miałeś bo nie potrafiłeś dojść co działa a co nie działa w twojej aplikacji. I nie ma znaczenia tu technologia. - Schadoow 2019-08-14 10:41

Pozostało 580 znaków

2019-08-15 20:26
0

Dobra, sprawa była oczywiście banalna. Zrobiłem cały kod od nowa ale teraz stworzyłem bazę dla ułatwienia że daty są polami string (nchar(10)). Kiedy to skonfigurowałem w bazie danych, a następnie resztę z waszą pomocą, wszystko działa bez problemu. Jeśli ktoś potrzebuje komponentu który pobiera wartości z formularza, poniżej kod:

export class CreateComponent implements OnInit  {
  constructor(private httpService: HttpService,  private formBuilder: FormBuilder) { }

  vacation: FormGroup;
  objVacation: Vacation;

  ngOnInit() {
    this.vacation = this.formBuilder.group({
      userName: [''],
      vacationStart: [''],
      vacationEnd: [''],
      superior: ['']
    });
  }
  onSubmit() {
      const vacationData: Vacation = {
        userName: this.vacation.controls.userName.value,
        vacationStart: this.vacation.controls.vacationStart.value,
        vacationEnd: this.vacation.controls.vacationEnd.value,
        superior: this.vacation.controls.superior.value
      };
      this.httpService.addVacation(vacationData).subscribe(
      vacation => {
        console.log(vacation);
      }
    );
  }
}

Dzięki wielkie za pomoc, nie udało by mi się dojść do tego bez waszej pomocy. Teraz spróbuje to wszystko sam sobie ogarnąć z typem date.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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