How to submit data via POST request from Angular to a .Net API

Question

I am trying to call a simple request, but the value(property) in API is null. Do you have any suggestions?

C#

[Route("getpagefields")]
[AcceptVerbs(WebRequestMethods.Http.Post)]
public IHttpActionResult GetPageFields([FromBody]string property)
{
   USERS user = TokenUtils.Authonticate(Request);
                
   return Ok(new { fields = WebServiceBL.GetPageFields(property) });
}

.ts

GetPageFields(){
  debugger;
  let urlPart = this.router.url.split('/')[3];
  let params = new HttpParams();
  params = params.set('data', urlPart);
  let test = this._httpClient.post(environment.apiBaseUrl+'users/getpagefields',params).subscribe(() => {   
 });
}

why do you send it as HttpParams ? it's supposed to be simple object... — Eli Porush
– Eli Porush, Commented Dec 17, 2022 at 20:11
@EliPorush because without I am getting error ' {message: "The request entity's media type 'text/plain' is not supported for this resource.",…} : "No MediaTypeFormatter is available to read an object of type 'String' from content with media type 'text/plain'." — Rachel
– Rachel, Commented Dec 17, 2022 at 20:23

kellermat · Accepted Answer · 2022-12-17 23:09:39Z

5

3 Ways of submitting Data via POST-Request in Angular

You can either submit your data via request-body, via query-params or via request-header. I made one example for each of these possibilities:

Submitting Data via Request-Body:

If you want to submit data via body, you can wrap it in an object and pass it via the second parameter:

const myData = { id: '1', name: 'Lukas' };
this.http.post(url, myData).subscribe();

And your .Net backend-method will then expect and object that corresponds to myData:

[HttpPost]
public IHttpActionResult GetPageFields([FromBody]MyDataObject myObject)
{
   var id = myObject.id;
   var name = myObject.name;
}

Submitting Data via Query-Params:

If you want to pass string values via HttpParams, they need to be passed as a property of third argument:

const params = new HttpParams()
                    .set('id', '1')
                    .set('name', 'Lukas');

this.http.post(url, null, { params });

And the corresponding .Net backend-method might look like this:

[HttpPost]
public IHttpActionResult GetPageFields([FromQuery] string id, [FromQuery] string name)
{
   var id = id;
   var name = name;
}

Submitting Data via Request-Header

In Angular you can submit data via Http-Header like this:

const httpHeaders = new HttpHeaders()
                    .set('id', '1')
                    .set('name', 'Lukas');    

const options = { headers: httpHeaders };

this.http.post(url, null, options);

And the corresponding .Net backend-method might look like this:

[HttpPost]
public IHttpActionResult GetPageFields()
{
    var id = Request.Headers.FirstOrDefault(x => x.Key == "id").Value.FirstOrDefault();
    var name = Request.Headers.FirstOrDefault(x => x.Key == "name").Value.FirstOrDefault();
}

edited Dec 17, 2022 at 23:09

answered Dec 17, 2022 at 20:11

kellermat

4,8515 gold badges12 silver badges27 bronze badges

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

6 Comments

Rachel Over a year ago

Thanks, without using this I am getting error :` {message: "The request entity's media type 'text/plain' is not supported for this resource.",…}`

kellermat Over a year ago

If you want to submit data via body, you might actually have to wrap it in an object. I adapted my example accordingly. And GetPageFields() will then expect an object and not a string.

kellermat Over a year ago

I also added an example for the backend-method.

Rachel Over a year ago

thanks, and if I wan to past it on header? (not so important by body)

kellermat Over a year ago

@Rachel: If it worked please tell me / mark my answer as the accepted answer.

|

Collectives™ on Stack Overflow

How to submit data via POST request from Angular to a .Net API

1 Answer 1

3 Ways of submitting Data via POST-Request in Angular

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Ways of submitting Data via POST-Request in Angular

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related