C# asp.net MVC 6中的Angular 2 post数据为空

目前，我正在将Angular 2 Beta-9与Asp.Net MVC 6一起使用。 我试图创建一个简单的联系人表单作为测试。问题是，我的表单数据似乎没有传递到服务器，而从角度看，一切似乎都正常

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

[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; }
    }

ContactVm.cs

/// <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);

[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

试试这个：

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();
    }

服务器端

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

如果不起作用，请参见下面的选定答案

• \

  ---

我认为您不需要JSON。stringify:

this.http.post（'/contact/send'，this.contact，新标题（{'Content-Type'：'application/json'}））.subscribe（）

---

这纠正了我的问题HTH

根据我的发现，如果MVC不能将您的发布值强制输入到参数中，它将“无声地失败”

所以，在开发过程中，我使用了“object”——这确保了我获得所有帖子。然后我将其微调回正确的对象

---

另外，我发现（在我使用的Angular 6中）您肯定不需要JSON.stringify对象。。。查看帖子中的Chome Inspect选项卡，然后预览，它将为您提供失败的一些详细信息…

您是否可以添加

/angular/contact

模板，联系人变量是否正确绑定..添加了模板和联系人模型我正在使用控制器。尽管我认为视图是可以的，因为我在调试过程中注意到所有内容都正确地传递给Post函数。您是否按照我的建议尝试了下面的答案？@JeffreyRosselle您是否查看了发送的请求，其中有属性，只是没有绑定模型？您是否尝试显式绑定名称而不是[（ngModel）]=“contact.name”name=“contact.name”您是否可以尝试

this.http.post（'/contact/send'，JSON.stringify（{contact:this.contact}），新标题（{'Content-Type'：'application/JSON'}）

我检查了链接，当我使用“urlsearchparms（）”对象时，它终于起作用了。虽然它对我来说是固定的，但我想找到一个解决方案，我不必将我的对象映射到URLSearchParams。你应该接受它作为一个答案，这样当其他用户来到这篇文章时，可能会得到正确的方向…顺便说一句，很高兴它帮助了你。正确的JSON.stringify，我想我在这篇文章还在beta版时发表了这篇文章，出于某种原因，我需要把它收紧。从那以后它一直在更新，我把它删除了。