Passing string from Angular to API

Question

I want to fill in one string parameter in my ASP.NET Core MVC API controller via Angular.

I have this working call:

API

//A class to wrap my string
public class Foo
{
  public string bar { get; set; }
}

[HttpPost]
public JsonResult GetDetails([FromBody] Foo bar) { ... }

Angular (service)

public get() {
  let bar: any = new Object();
  bar.foo = 'Hello World';

  return this._httpClient.post('api/GetDetails', bar).toPromise();
}

But what I really want is pass a string without having to wrap it in a class like this:

API

[HttpPost]
public JsonResult GetDetails([FromBody] string bar) { ... }

Angular (service)

public get() {
let bar: string = "Hello World";

return this._httpClient.post('api/GetDetails', bar).toPromise();
}

But I get errors like it's an Unsupported Media Type or 'bar' stays null.
What is the right syntax to just pass one value?
The other thing is, I can pass an integer from Angular to the API just fine but not a string.

Rohìt Jíndal · Accepted Answer · 2018-07-09 06:22:10Z

5

Try this :

let bar = JSON.stringify({'foo' : 'Hello World'});
let body = new HttpParams();
body = body.set('bar', bar);

http.post('/api/GetDetails', body).subscribe();

answered Jul 9, 2018 at 6:22

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thierry Prost · Accepted Answer · 2018-07-09 06:30:13Z

2 ways, depending on whether you have control over back or front end.

1. Angular-service Use header application/json; charset=utf-8 as described here and here (note the charset)

2. API The other one is to build a custom string-binder derived which spits out a string.

[HttpPost]
public JsonResult GetDetails([ModelBinder(typeof(StringBinder))] string bar) { ... }

where

public class StringBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)
            throw new ArgumentNullException(nameof(bindingContext));

        using (var sr = new StreamReader(bindingContext.HttpContext.Request.Body))
            Body = sr.ReadToEnd();


        bindingContext.Result = ModelBindingResult.Success(Model);

        return Task.CompletedTask;
    }
}

Stanislav · Accepted Answer · 2020-12-02 17:43:10Z

0

In Agnular 10 the following works:

let bar = 'Hello World!';
this._httpClient.post('api/GetDetails', '=' + bar, { 
    headers: new HttpHeaders({ 
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' 
    }) 
})

PS: the way I figured it out was by comparing curls generated from dev tools for the working request in AngularJs and not working request in Angular 10

answered Dec 2, 2020 at 17:43

Stanislav

4,6192 gold badges35 silver badges35 bronze badges

Collectives™ on Stack Overflow

Passing string from Angular to API

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related