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

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不能强制将你发布的值放入参数中，它将“无声地失败”。

所以，在我开发的过程中，我使用了“对象” - 这可以确保我获得所有帖子。然后我对它进行微调以引用正确的对象。

另外，我发现（在我使用的Angular 6中）你绝对不需要JSON.stringify对象...查看Chome Inspect选项卡，在POST，然后预览，它将给你一些失败的细节...

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（＆＃39; / contact / send＆＃39;，this.contact，new Headers（{＆＃39; Content-Type＆＃39;：＆＃39; application / json＆＃39; }））订阅（）;

这纠正了我的问题HTH

在asp.net MVC 6中，Angular 2 post数据为null

4 个答案: