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.
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.
javascript
json
asp-mvc
angular
typescript
Share
Improve this question
asked Jul 9, 2018 at 6:13
HypenateHypenate2,07444 gold badges2525 silver badges3939 bronze badges0
Add a ment
|
3 Answers
3
Reset to default
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();
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;
}
}
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 paring curls generated from dev tools for the working request in AngularJs and not working request in Angular 10
