Angular 2 post data is null in asp.net MVC

Question

I use Angular 2 and ASP.Net MVC. When sending data(the getData method) to the server receive null. For the test, I tried to send a post request using jquery ajax, everything went well. Please tell me what is the problem?

properties.service.ts

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

import '../../../shared/rxjs-operators';
import { PropertyNode } from './property.model';

@Injectable()
export class PropertiesService {
    private headers = new Headers({ 'Content-Type': 'application/json' });
    private dataUrl = 'Editor/returnProperties';

    constructor(private http: Http) { }

    getData(FullName: string): Promise<PropertyNode[]> {
        let body = JSON.stringify({ FullName: FullName});
        let options = new RequestOptions({
            headers: this.headers
        });

        return this.http.post(this.dataUrl, body, this.headers)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response): PropertyNode[] {
        let data = res.json();
        let properties: PropertyNode[] = [];
        console.log(data)
        return data;
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

EditorController.cs

[HttpPost]
public JsonResult returnProperties(string FullName)
{
    try
    {
        PAVBaseDataItem node = IDE.MvcApplication.fDataProvider.RootItem.ChildItem(FullName);
        List<PAVBasePropertyItem> properties = node.PropertiesList();
        return Json(properties);
    }
    catch (Exception ex)
    {
    return Json("");
    }
}

Screenshot c# debug, Screenshot chrome-devtools.

Update

Changed the properties.service.ts and it worked. All changes in the method getData:

getData(FullName: string): Promise<PropertyNode[]> {
        let body = JSON.stringify({ FullName });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.dataUrl, body, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

Sefa · Accepted Answer · 2016-10-21 10:46:34Z

4

Update your controller code

[HttpPost]
public JsonResult returnProperties([FromBody]string FullName) // <--- Added FromBody
{
    try
    {
        PAVBaseDataItem node = IDE.MvcApplication.fDataProvider.RootItem.ChildItem(FullName);
        List<PAVBasePropertyItem> properties = node.PropertiesList();
        return Json(properties);
    }
    catch (Exception ex)
    {
    return Json("");
    }
}

Only complex parameters are resolved from body by default.

answered Oct 21, 2016 at 10:46

Sefa

9,05210 gold badges54 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

al.koval Over a year ago

Hi, tell please the name space for [FormBody]?

Sefa Over a year ago

System.Web.Http

al.koval Over a year ago

Fixed as in your example, but on server receive null.

Sefa Over a year ago

Can you check on developer console to see if your requests body is really added and what is inside?

al.koval Over a year ago

Breakpoint catches the request, but I do not see its value in the console visual studio.

|

RaghuS · Accepted Answer · 2016-10-21 11:43:57Z

0

Try something like this

   const headers = new Headers();
    headers.append('Content-Type', 'application/json');

    this.http.post(this.dataUrl, JSON.stringify(data), { headers: headers })      //added return
        .map(response => response.json())
        .subscribe(result => {
            var returneddata = result;
        },
        err => console.log(err)
        );

answered Oct 21, 2016 at 11:43

RaghuS

1031 silver badge12 bronze badges

Comments

al.koval · Accepted Answer · 2016-10-24 10:39:17Z

Changed the properties.service.ts and it worked. All changes in the method getData:

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';

import { PropertyNode } from './property.model';

@Injectable()
export class PropertiesService {
    private dataUrl = 'Editor/returnProperties';

    constructor(private http: Http) { }

    getData(FullName: string): Promise<PropertyNode[]> {
        let body = JSON.stringify({ FullName });
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.dataUrl, body, options)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response): PropertyNode[] {
        let data = res.json();
        let properties: PropertyNode[] = [];
        console.log(data)
        return data;
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

Collectives™ on Stack Overflow

Angular 2 post data is null in asp.net MVC

properties.service.ts

EditorController.cs

Update

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

properties.service.ts

EditorController.cs

Update

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related