从我的SPA FETCH POST接收到的控制器viewmodel值为null

Question

I am doing a POST back to my Asp.net Controller from my SPA. The controller has this setup:

    [HttpPost]
    [AllowAnonymous]
    public async Task<IActionResult> Get([FromForm] LoginViewModel model)
    {

My asp.net Core API login viewmodel is:

public class LoginViewModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

My SPA is written in Typescript.

My SPA interface is:

interface userLogin {
  Username: string;
  Password: string;
}

and I declare it as such:

private login: userLogin,

and my FETCH is structured so:

 // Lets do a fetch!

  console.log("username, password: ", this.username, this.password);

  this.login.Username = this.username;
  this.login.Password = this.password;

  console.log("login.username, login.password", this.login);
  console.log("JSON login: ", JSON.stringify(this.login));

  const task = fetch("/api/jwt", {
    method: "POST",
    body: JSON.stringify(this.login),
    headers: {
      "Content-Type": "application/json;charset=UTF-8"
    }

NOTE: When set up in POSTMAN this works.

Looking at those console logs:

username, password: admin password
login.ts:37 login.username, login.password {Username: "admin", Password: "password"}
login.ts:38 JSON login:  {Username: "admin", Password: "password"}

Here is the network tab in Chrome showing the payload:

Finally here is the controller paused at a break showing the values for the POST being null and null:

Why am I getting null on the fetch POST? What do I need to do to make my API receive the values?

Answer 1

You are explicitly specifying the contentType as application/json and sending the json stringified version of the object. This will be send the data in the request body when the asynchronous call is made. So you need to use FromBody attribute so that the the framework know how to do model binding properly from the request which contains your js object/data in json format.

Change the decorator attribute from FromForm to FromBody

[HttpPost]
[AllowAnonymous]
public async Task<IActionResult> Get([FromBody] LoginViewModel model)
{
    // to do : Return something
}