Angular 2 post data is null in asp.net MVC 6

Question

At the moment I'm using Angular 2 Beta-9 together with Asp.Net MVC 6 . I'm trying to create a simple contact form as test. The problem is that my form data does not seem to get passed to the server, while everything seems to be going ok on the Angular side.

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

I can't see or find anything I'm doing wrong. Untill the http.post , this.contact is filled in like it should, but once it reaches the server it's null .

UPDATE

Found that the Request.Form is throwing the following error:

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

Answer 1

From what I have found, MVC will "fail silently" if it cannot force your posted value into the parameter.

So, while I am developing I used "object" - which ensures I get ALL posts. And then I fine tune it back to refer to the correct object.

Also, I found that (in Angular 6 which I am using) you definitely don't need to JSON.stringify the object... Look at the Chome Inspect tab, at the POST, an then Preview, and it will give you some detail of the failing...

Answer 2

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

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

server side .

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

If it doesn't work also see below selected answer.

• Angular2 Http post request not binding to ASP.NET 5 controller's action \\

Answer 3

try this:

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

I don't think you need JSON.stringify:

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

This corrected my issue HTH