How can I pass a string to a post request in Angular?

angular 2 http get example
angular 7 http post example
angular 7 http get example
@angular/common/http
angular 6 httpclient post example
angular http get with params
angular 6 http headers example
angular add query parameter to url

I have done some searching and nothing seems to help.

My angular looks like this with username being a string.

getUser(username = null) {

if (username == null) {
  username = this.cookie.getCookieValue("username");
}
console.log(JSON.stringify({ username: username }));
console.log("passing in "+ username);

return this.http.post<User>(this.userBackendUrl + "/user", username, httpOptions).pipe(map(user => {
  console.log("Successfully got the user!");
  console.log(user);
  return user;
}));}

Backend method looks like

public ActionResult GetUser(string username)
    {

I can hit my method but my username string in the backend is always null.

Depending how the string is sent with the request you have to do the following:

Sent as a plain string

If your username or string is sent as plain string in the request like the following:

"testuser"

Then you can add the [FromBody] attribute to a string parameter in the controller, like the following:

public ActionResult GetUser([FromBody] string username)
{
   //...
}

If your username or string is not sent as "testuser" pass the variable or string to the JSON.stringify method like this:

return this.http.post<User>(this.userBackendUrl + "/user", JSON.stringify(username), httpOptions) //...

Sent as a JSON object

If your username or string is sent as a JSON object in the request like the following:

{
   username: "testuser"
}

Then you need to create a seperate class (a DTO for example, GetUserRequest) tp bind to, which should look like this:

public class GetUserRequest
{
   public string Username { get; set; }
}

Later you can bind the model (your sent JSON object) to this class, again with providing the [FromBody] attribute and a parameter with the created class as the data type, like the following:

public ActionResult GetUser([FromBody] GetUserRequest user)
{
   //...
}

Multiple parameters without creating an extra class/DTO

As Lionel asked here are two ways I know how you can bind to multiple parameters without creating an extra class or a DTO.

Unfortunately, you can not bind the [FromBody] to multiple parameters to my knowledge.

But there are the following two ways:

Send data as form url encoded

If you send the data form url encoded you can bind the data/parameters with the [FromForm] attribute like the following:

Send the data as form url encoded:

username=test&email=test%40gmail.com&created=2018-08-07T15%3A02%3A00.736Z

Bind data with [FromForm] attribute:

public ActionResult GetUser([FromForm] string username, [FromForm] string email, [FromForm] DateTime created)
{
   //...
}

Send data as JSON object and bind with Newtonsoft

Another way would be using the JObject of Newtonsoft. This way is a little less intuitive to my opinion.

You would send the data as a normal JSON object like the following:

{   
   "username": "test",  
   "email": "test@gmail.com",   
   "created": "2018-08-07T14:53:54.639Z"
}

And then you would bind the data to a single JObject with a [FromBody] attribute and then bind the data to seperate variables like the following:

public void GetUser([FromBody] JObject requestBody)
{
   string username = requestBody["username"].ToString();
   string email = requestBody["email"].ToString();
   DateTime created = requestBody["created"].ToObject<DateTime>();
}

Communicating with backend services using HTTP, The aynchronous method sends an HTTP request, and returns an There's no need to pass a <string> type parameter to get(). return this.http.get(filename,  In this Angular Http Post Example, we will show you how to make an HTTP Post Request to a back end server. We use the HttpClient module in Angular. The Angular introduced the HttpClient Module in Angular 4.3. It is part of the package @angular/common/http. We will create a Fake backend server using JSON-server for our example.

Request in Angular returns an observable, if you want to get a response, subscribe to your request in place of your pipe call, example:

this.http.post<User>(...).subscribe(res => console.log(res));

When your server is done with the request the response will be passed through the subscribe parameter "res".

HttpParams, An HTTP request/response body that represents serialized parameters, per the string | null : The first value of the given parameter, or null if the parameter is  Angular 6 http post request with x-www-form-urlencoded data 1 angular 5 httpclient , on post , the response does not return custom headers, only returns response object

modify your c# method like below

    [Route("GetUser/{username}")]
    [HttpPost]
    public ActionResult GetUser(string username)
    {
       //code
    }

Angular, This sends an HTTP POST request to the JSONPlaceholder api which is a fake online REST interface Article { id: number; title: string; } that is passed as the second parameter to the subscribe() method of the Observable  The problem was in my RequestOptions, apparently, you can not pass params or body to the RequestOptions while using the post. Removing one of them gives me an error, removing both and it works. Removing one of them gives me an error, removing both and it works.

Core HTTP API • Angular, How to send the various types of HTTP requests. How to We covert username:​password to a base64 string and pass that to the server via a header called  This post is a guide how to Pass the URL Parameters or Query string along with the HTTP Request using the HttpClient in Angular. We will be using HttpParams to add the query parameter, which is then used by the httpClient.get method to send a get request to the GitHub API.

[solved] Angular HttpClient POST request and parameters, The request arrives to the HTTP server, but apparently no parameters are added. Here is the code: makeLogin(login: string, pass: string) { const body = {user:  On this page we will provide angular 2 Http post() example. It performs a request using HTTP POST method. In Http.post() method, we need to pass server URL, any object to post and request option that is optional. In request option we can set request headers such as content type and to handle this angular provides Headers and RequestOptions API.

Angular HttpClient post, In HttpClient.post method we need to pass URL, request body and optional http 1. url: Pass URL as string where we want to post data. However, since it was expecting just a string and received some entirely different object, it thinks the request is invalid and gives you null for that parameter. If all you are trying to pass to the WebApi method is a string, you should be able to pass that as the data rather than a JSON object w/ a string parameter. – mattherman Nov 16 '15

Comments
  • That didn't work do I need to add something to my route? Because my route attribute looks like this [Route("user")] and attribute looks like this [HtttpPost]
  • No that should be correct as you said that you can hit the method. What type is the username variable in the angular code (the one you send on the post request)? Is it a plain string or a JSON object?
  • It's a plain string, here I will update my code on here
  • Are you using ASP .NET or ASP .NET Core?
  • I am using .netcore
  • I already know that it's just my variable isn't getting passed in