Angular 2 post 數據在 asp.net MVC 6 中為空

Question

目前我正在使用Angular 2 Beta-9和Asp.Net MVC 6 。 我正在嘗試創建一個簡單的聯系表單作為測試。 問題是我的表單數據似乎沒有傳遞到服務器，而在 Angular 方面似乎一切正常。

聯系人.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

import {Component, View} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

@Component({
    selector: 'contact',
    bindings: [ContactComponent],
    viewProviders: [HTTP_PROVIDERS],
    templateUrl: '/angular/contact'
})

export class ContactComponent {
    http = undefined;
    contact = {};

    constructor(http: Http) {
        this.http = http;
    }

    onSubmit() {
        this.http.post('/contact/send', JSON.stringify(this.contact), new Headers({ 'Content-Type': 'application/json' })).subscribe();
    }
}

bootstrap(ContactComponent);

聯系方式.cshtml

<form #f="ngForm" (ngSubmit)="onSubmit(contact)">
        <div>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" [(ngModel)]="contact.Name" class="form-control text-input" id="name" placeholder="Name" />
            </div>
            <div class="form-group">
                <label for="email">E-mail</label>
                <input type="email" [(ngModel)]="contact.Email" class="form-control text-input" id="email" placeholder="E-mail" />
            </div>
        </div>
        <div>
            <div class="form-group">
                <label for="subject">Subject</label>
                <input type="text" [(ngModel)]="contact.Subject" class="form-control text-input" id="subject" placeholder="Subject" />
            </div>
        </div>
        <div>
            <div class="form-group">
                <label for="message">Bericht</label>
                <textarea type="text" [(ngModel)]="contact.Message" class="form-control" id="message" placeholder="Message"></textarea>
            </div>
        </div>
        <div>
            <div>
                <button type="submit" class="btn btn-success">Send</button>
            </div>
        </div>
    </form>

聯系人控制器.cs

[HttpPost]
public IActionResult SendContact([FromBody]ContactVm contact)
{
    //do something
}

聯系方式

public class ContactVm
    {
        [Required]
        [DataType(DataType.Text)]
        public string Name { get; set; }
        [Required]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }
        [Required]
        [DataType(DataType.Text)]
        public string Subject { get; set; }
        [Required]
        [DataType(DataType.MultilineText)]
        public string Message { get; set; }
    }

我看不到或找不到我做錯了什么。 直到http.post ， this.contact都像它應該的那樣填寫，但是一旦它到達服務器，它就是null 。

更新

發現Request.Form拋出以下錯誤：

Incorrect Content-Type: text/plain;charset=UTF-8

Answer 1

根據我的發現，如果 MVC 無法將您發布的值強制到參數中，它將會“靜默失敗”。

所以，在我開發時，我使用了“對象”——這確保我得到所有帖子。 然后我微調它以引用正確的對象。

此外，我發現（在我使用的 Angular 6 中）你絕對不需要 JSON.stringify 對象......查看 Chome Inspect 選項卡，在 POST，然后預覽，它會給你一些失敗的細節...

Answer 2

let headers = new Headers({ 'Content-Type': 'application/json'});

this.http.post('/contact/send',JSON.stringify(this.contact),{ headers: headers })
         .subscribe(...);

服務器端。

[HttpPost]
public IActionResult SendContact(ContactVm contact)
{
    //do something
}

如果它不起作用，請參閱下面選擇的答案。

• Angular2 Http post 請求未綁定到 ASP.NET 5 控制器的操作\\

Answer 3

嘗試這個：

getJsonHeader(): Headers {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        return headers;
    }

   onSubmit() {
        this.http.post('/contact/send', JSON.stringify(this.contact), { headers: this.getJsonHeader() }).subscribe();
    }

Answer 4

我認為你不需要 JSON.stringify：

this.http.post('/contact/send', this.contact, new Headers({ 'Content-Type': 'application/json' })).subscribe();

這糾正了我的問題 HTH