Angular 2 发布数据在 asp.net MVC 6 中为空

Question

目前我正在使用 Angular 2 Beta-9 和 Asp.Net MVC 6。 我正在尝试创建一个简单的联系表格作为测试。问题是我的表单数据似乎没有传递到服务器，而在 Angular 端似乎一切正常。

contact.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);

Contact.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>

ContactController.cs

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

ContactVm.cs

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 中，然后是 Preview，它会给你一些失败的细节......

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 request not binding to ASP.NET 5 controller's action\

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