Angular HttpClient post cannot send simple string parameter

Question

I want to send a request to a C# service which has a string as its parameter. I wrote an angular service like this:

export class CategoryService {

  constructor(private http: HttpClient) { }
  getCategory(categoryName: string): Observable<Category> {
    console.log(categoryName);
    return this.http.post("/category/GetCategory", { categoryName: categoryName }, { headers: new HttpHeaders({ 'Content-type': 'application/json' }) });
  }

I also tried:

export class CategoryService {

  constructor(private http: HttpClient) { }
  getCategory(categoryName: string): Observable<Category> {
    console.log(categoryName);
    return this.http.post("/category/GetCategory",  categoryName , { headers: new HttpHeaders({ 'Content-type': 'application/json' }) });
  }

But when they both successfully send the request, the parameter is always null. My C# service is:

    [HttpPost]
    public IActionResult GetCategory([FromBody]string categoryName)

The first approach is the correct approach, the second one is not. But as you said both of them don't work. In that case could you check if you are able to successfully receive the categoryName when you send it via Postman for eg? — SiddAjmera, Nov 24 '18 at 10:22
If I remove [FromBody] I can receive it by Postman but with [FromBody] I cannot — Nick Mehrdad Babaki, Nov 24 '18 at 10:32
I'm not so sure about your C# service. I don't even know why [FromBody] is used, but if you're getting it from Postman after removing `[FromBody]`, then with the first approach that you tried, you should also get it from Angular. — SiddAjmera, Nov 24 '18 at 10:34
have you tried using `JSON.stringify(categoryName)` in your typescript service with `FromBody` in controller? — Niladri, Nov 24 '18 at 10:59
@MehrdadBabaki check if my above suggestion works. keep the content-type as `HttpHeaders({ 'Content-Type': 'application/json' })` — Niladri, Nov 24 '18 at 11:04
@Niladri Thanks, but it seems I shouldn't use JSON. I found the answer on the link below. — Nick Mehrdad Babaki, Nov 24 '18 at 11:09
try using [material autocomplete](https://material.angular.io/components/autocomplete/overview) and try to move away from antiques like JQuery. — Bargros, Sep 15 '20 at 23:22

score 2 · Answer 1 · answered Sep 28 '19 at 07:47

I can offer my own solution :)
Angular:

Func(data: string): Observable<any> {
        let params = new HttpParams();
        params = params.set('data', data);
        return this.http.post("url", params);
    }

C#:

public IActionResult Method([FromForm]string data)

score 1 · Answer 2 · answered Dec 29 '20 at 10:08

1

Best and easiest solution

this.http.post(this.serverAddress + API_ADDRESS + '?param=' + yourStringParam, null);

answered Dec 29 '20 at 10:08

Nemanja Andric

625
11
30

score 0 · Accepted Answer · answered Nov 24 '18 at 11:06

0

I found the solution here: Angular2 - Http POST request parameters I also should remove [FromBody] from my service parameter.

answered Nov 24 '18 at 11:06

Nick Mehrdad Babaki

11,560
15
45
70

score 0 · Answer 4 · answered Sep 29 '21 at 22:36

As @Niladri said, this worked for me:

... using JSON.stringify(categoryName) in your typescript service with FromBody in controller

Also this is important:

... keep the content-type as HttpHeaders({ 'Content-Type': 'application/json' })

It works with the FromBody in the controller method :)

Angular HttpClient post cannot send simple string parameter

4 Answers4