CODEWITHSUNDEEP
c#typescriptangularasp.net-core-mvc
Jeffrey Rosselle
Jeffrey Rosselle

Reputation: 765

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

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

Upvotes: 2

Views: 3589

Answers (4)

James Joyce
James Joyce

Reputation: 1774

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

Upvotes: 2

Danimal521
Danimal521

Reputation: 79

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

Upvotes: 0

micronyks
micronyks

Reputation: 55443

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.

Upvotes: 1

KnowHoper
KnowHoper

Reputation: 4642

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

Upvotes: 0

Related Questions