Controller ViewModel Werte werden als Null von meinem SPA FETCH POST empfangen

Question

Ich mache einen POST zurück zu meinem Asp.net Controller von meinem SPA. Der Controller verfügt über dieses Setup:

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

Mein asp.net Core-API Login Viewmodel ist:

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

Mein SPA in Maschinenschrift geschrieben.

Meine SPA-Schnittstelle ist:

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

und ich erkläre es als solches:

private login: userLogin, 

und meine ist so strukturiert, FETCH:

// 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" 
    } 

HINWEIS: Wenn einrichten in POSTMAN das funktioniert.

an diesen Konsolenprotokolle der Suche:

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

Hier wird das Netzwerk-Registerkarte in Chrome zeigt die Nutzlast:

Schließlich hier ist die Steuerung bei einer Pause pausiert die Werte zeigt, für der POST ist null und null:

Warum bekomme ich beim Fetch POST null? Was muss ich tun, damit meine API die Werte erhält?

Answer 1

Sie geben den contentType explizit als application/json an und senden die JSON-String-Version des Objekts. Dadurch werden die Daten im Anforderungshauptteil gesendet, wenn der asynchrone Aufruf erfolgt. Sie müssen also das FromBody Attribut verwenden, damit das Framework weiß, wie man die Modellbindung ordnungsgemäß von der Anfrage aus durchführt, die Ihr js-Objekt/Daten im JSON-Format enthält.

Ändern der Dekorateur Attribut aus FromForm zu FromBody

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