在asp.net MVC 6中，角2 post数据为空。

Question

目前，我正在使用角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);

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

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 2

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

所以，在我开发的时候，我使用了"object“--这确保了我得到了所有的帖子。然后我对它进行微调，以引用正确的对象。

另外，我发现(在我正在使用的第6角中)您绝对不需要JSON.stringify对象.看看Chome检查标签，在帖子，然后预览，它会给你一些失败的细节.

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