Angular4 http post method does not pass data to web api

Question

When I called the http post method it returns "data does not pass correctly".I passed data through body and I also tried by passing using json.stringify() I also tried by using content type as following also. But it didn't work.

const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: headers });
this.http_.post('http://localhost:12412/api/employee', remark, options)
  .subscribe((data) => {console.log(data)})};

I attached the post call method in component.ts file below:

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';
import { Response, Headers, RequestOptions,Http} from '@angular/http';
import { HttpClient} from '@angular/common/http';
import { Time } from '@angular/common/src/i18n/locale_data_api';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date-struct';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-calendar';
import {Ng2OrderModule} from 'ng2-order-pipe';
import {Observable} from "rxjs/Rx";
import { PostChangesService } from './PostChanges.service';
import { Body } from '@angular/http/src/body';


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})

export class TableComponent implements OnInit {
  constructor(private http: HttpClient, private http_:Http){

  }

  EditValue(event,remark,log_id) {
    console.log(remark+" "+log_id );

    //  var headers = new Headers();
    //  headers.append('Content-Type', 'application/x-www-form-urlencoded');
    //  var body="remark="+remark;
    //  //let body = JSON.stringify(remark);
    //    this.http_.post('http://localhost:12412/api/employee?',{body:remark},{headers:headers})
    // .subscribe((data) => {console.log(data)}
    // );
    const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    const options = new RequestOptions({ headers: headers });
    //const params = new URLSearchParams();

    // let body = JSON.stringify(remark);
   this.http_.post('http://localhost:12412/api/employee?',remark,options)
    .subscribe((data) => {console.log(data)} 
   )};  
  }
}

And the web api post method is as follows:

[HttpPost]
public string Post([FromBody]string remark)
{
    if (remark != null)
    {
        return remark + " _ " ;
    }
    else
        return "data doesn't pass correctly";
}

"remark" value does not pass to web api post method. when I compile the code it returns "data doesn't pass correctly".If it passes correctly need to return "remark" value I passed — E.L.N.D.Madubhashini
– E.L.N.D.Madubhashini, Commented Mar 7, 2018 at 5:51
console.log(remark+" "+log_id ); printing desired value to console ? — user1608841
– user1608841, Commented Mar 7, 2018 at 5:57

Ali Shahzad · Accepted Answer · 2018-03-07 06:19:56Z

1

Try passing your post data as object like this:

 // let body = JSON.stringify(remark);
 this.http_.post('http://localhost:12412/api/employee',{remark:remark},options)
   .subscribe((data) => {console.log(data)} 
 )};

Web api post method

[HttpPost]
public string Post([FromBody]RemarkModel model)
{
   if (model.remark != null)
   {
                return model.remark + " _ " ;
   }
   else
   {
    return "data doesn't pass correctly";             
   }
}

public class RemarkModel
{
   public string remark {get; set;}
}

edited Mar 7, 2018 at 6:19

answered Mar 7, 2018 at 5:57

Ali Shahzad

5,3327 gold badges38 silver badges67 bronze badges

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

7 Comments

Eldho Over a year ago

@E.L.N.D.Madubhashini Can you try without the options parameter.

Eldho Over a year ago

@AliShahzad OP should be able to send string value. I would consider class as a workaround.

E.L.N.D.Madubhashini Over a year ago

I tried using above updated answer still didn't work.

Ali Shahzad Over a year ago

have you removed the "?" from url?

E.L.N.D.Madubhashini Over a year ago

I tried without using options parameter. It produce an error called "Response for preflight has invalid HTTP status code 405." and "options url 405 (method not allowed)"

|

Ha Hoang · Accepted Answer · 2018-03-07 06:45:11Z

0

You can try to change your code to:

let body = {
   remark : remark
};

this.http_.post('http://localhost:12412/api/employee',JSON.stringify(body),options)
   .subscribe((data) => {console.log(data)});

No change Web API. It should be worked.

answered Mar 7, 2018 at 6:45

Ha Hoang

1,68413 silver badges14 bronze badges

1 Comment

E.L.N.D.Madubhashini Over a year ago

Didn't work for me.Still get that data does not pass message.

jithin john · Accepted Answer · 2018-03-07 06:47:49Z

0

Import Headers from @angular/http

Post=(url:string,data:any)=>{
    this.headers = new Headers();
    let options = new RequestOptions({ headers: this.headers, method: "post"}); 
    return this.http.post(
        url,
        data,
        options
    );
}

It worked for me ;)

answered Mar 7, 2018 at 6:47

jithin john

5724 silver badges12 bronze badges

2 Comments

E.L.N.D.Madubhashini Over a year ago

I added .subscribe((data) => {console.log(data)} ); to above code to check those data are passing. Still not passing.

jithin john Over a year ago

Do not subscribe directly to http post(its not reccomended), return data from post. Subscribe it as a common method. like.... this.httpservice.postdata().subscribe()

Collectives™ on Stack Overflow

Angular4 http post method does not pass data to web api

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related