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

Question

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.

Answer 1

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": "[email protected]",   
   "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>();
}