How to use http.post in angular/cli?

Question

I'm new to angular and while trying post a string to web api from angular project,the parameter in the web api Post method is always null.If i use [FromBody], the post method itself not getting called.If i remove the [FromBody] from the Post method .The method is getting called but the value of the parameter is null.Can anyone please help me here!!

SendTODB(db:Event)
{
  
  this.http.post('https://localhost:44301/Student',this.inpuctstexts).subscribe((data)=>(<HTMLInputElement>db.target).value);
}

In My WebApi:

[ApiController]
    [Route("[controller]")]
    public class StudentController : ControllerBase
    {
        [HttpGet]
        public ActionResult<List<Student>> StudentList()
        {
            List<Student> student = new List<Student>();
            student.Add(new Student() { StudentName = "Mike", Marks = "200" });
            student.Add(new Student() { StudentName = "Jack", Marks = "250" });
            student.Add(new Student() { StudentName = "Jacob", Marks = "300" });
            student.Add(new Student() { StudentName = "John", Marks = "500" });
            return (student);

        }

        [HttpPost]
        public ActionResult<string> student(string input)
        {
            return input;
        }
    }

This is my angular code

This is my WebApi Controller class

The call itself seems fime, check if the body is null before calling this line. — mamichels, Aug 06 '20 at 12:42
Post code *here* as formatted text. Not via images or links to third party services. — crashmstr, Aug 06 '20 at 12:43
The variable (this.inpuctstexts) is not null. I have checked using console.log(this.inpuctstexts). — Vishnuraj_, Aug 06 '20 at 12:46
Please make sure that your : this.inpuctstexts is the same object like your [Frombody] Myclass myclass. IF your inpuctstexts is just a string, wrap it in an object — user3110458, Aug 06 '20 at 12:59
Hi @user3110458...inpuctstexts is just a string..How can i wrap it in an object? — Vishnuraj_, Aug 06 '20 at 13:02
Little tip: No need for lists as JS arrays pretty much provide all you need for lists — Zer0, Aug 06 '20 at 13:58

score 0 · Answer 1 · answered Aug 06 '20 at 12:59

0

HttpClient probably uses application/json as content-type by default so try wrapping your payload in an object on both ends.

answered Aug 06 '20 at 12:59

M.Samir

1
1

Hi Mohamed ..I have used json.Stringify(this..inpuctstexts).But invain.The parameter in the post method is null – Vishnuraj_ Aug 06 '20 at 13:20

score 0 · Answer 2 · answered Aug 06 '20 at 13:27

0

This is what formbody does:

When a parameter has [FromBody], Web API uses the Content-Type header to select a formatter. In this example, the content type is "application/json" and the request body is a raw JSON string (not a JSON object). At most one parameter is allowed to read from the message body.

please check this answer:

FromBody string parameter is giving null

answered Aug 06 '20 at 13:27

user3809743

41
2

HI ..I have tried that approach but it is not working – Vishnuraj_ Aug 06 '20 at 13:59

Naveen Motwani - AIS · Answer 3 · 2020-08-06T15:07:02.620

I think you need to set the header and [FromBody] will be required at the API. Change your service code to

SendTODB(db:Event)
{
   const header = {
 'Content-Type': 'application/json',
  'Accept': 'application/json',
  'Access-Control-Allow-Headers': 'Content-Type',
    }
    
   const headerOptions = {                                                                                                                                                                                 
     headers: new Headers(header), 
   };
    
   const data = JSON.stringify(inpuctstexts);

   return this.http.post(https://localhost:44301/Student, data, headerOptions)
          .subscribe((data)=> {
                  // your code will go here
               }) ;
}

If it not work then create a model in you api

    class RequrestModel{
    
    public string input {get;set;}
    }


 [HttpPost]
        public ActionResult<string> student([FromBody]RequestModel request)
        {
            return request.input;
        }

From your front end

SendTODB(db:Event)
    {
           const header = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers': 'Content-Type',
        }
        
       const headerOptions = {                                                                                                                                                                                 
         headers: new Headers(header), 
       };

      const dataModel = {
       input = inpuctstexts;
       }
        
       const data = JSON.stringify(dataModel);
    
       return this.http.post(https://localhost:44301/Student, data, headerOptions)
              .subscribe((data)=> {
                      // your code will go here
                   }) ;
    }

It will work

HI ...I have used the above code .but it still not working .This error is thrown ' POST https://localhost:44301/Student 415' — Vishnuraj_, Aug 06 '20 at 14:31
ERROR HttpErrorResponse {headers: HttpHeaders, status: 415, statusText: "OK", url: "https://localhost:44301/Student", ok: false, …} — Vishnuraj_, Aug 06 '20 at 14:35
Could you please update the headers, I just updated the code — Naveen Motwani - AIS, Aug 06 '20 at 15:07
Would you please enlighten me with simple example on how angular posts a string via http.post() to a webapi post method. — Vishnuraj_, Aug 06 '20 at 16:18

How to use http.post in angular/cli?

3 Answers3