Data that is posted from angular 4 is getting as null in .net core web api

Question

As part of learning i was working on creating a angular form and connecting it to a web api,when i post data from form,it is getting as null values in the api, I have tried adding a [Route("jsonbody")] but that is not working, also tried JSON.stringify(model) in the service but that is also not working.

This is how i posted the data from angular

onSubmit(form: NgForm) {
   this.registerobj.postUserData(this.model).subscribe()
 }

Model class is

export class UserModel {
constructor(
    public FirstName: string ='',
    public LastName: string = '',
    public Address: string = '',
    public DateOfBirth: string = '',
    public Gender: string = '',
    public Language: string = '',
    public Email: string = ''
) {}
}

Posted the data from service like this

postUserData(model: UserModel) {
     return this.http.post<any>(`${this.serviceUrl}`, model)
}

.Net Core api Controller

[Route("api/[controller]")]
    public class UserController : Controller
    {
        public UserController(IUser userItems)
        {
            UserItems = userItems;
        }
        public IUser UserItems { get; set; }

        [HttpPost]
        public IActionResult Insert(UserModel user)
        {
            UserRepository UserItems = new UserRepository();
            try
            {

                if (user == null)
                {
                    return BadRequest("Recieved a Bad request");
                }
              UserItems.Add(user);

               return Ok();
            }
            catch(Exception e)
            {
                return StatusCode(500, e);
            }

        }
    }

UserModel in API

 public class UserModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public string DateOfBirth { get; set; }
    public string Gender { get; set; }
    public string Language { get; set; }
    public string Email { get; set; }
}

.NET Core uses PascalCasing by default. Your Angular model uses PascalCasing. Have a look if that helps... Please also catch the actual call (network tab in debugging tools) to see if the request looks like it should. And you could use Postman to get the call to work first, so you can fix it in code later. — rickvdbosch
– rickvdbosch, Commented May 24, 2018 at 7:19

Arun · Accepted Answer · 2018-05-24 11:44:43Z

1

try by sending the data in body like this.

post(data) {
           const body = {
                  "column_name1":"data1",
                 "column_name2":"data2",

       };
       const headers = new Headers(
            {
                'accept': 'application/json',
                'content-type': 'application/json'
            });
        const options = new RequestOptions({ headers: headers });
    return this.http.post(this.url, body, options).map((response: Response) => response.json());

answered May 24, 2018 at 11:44

Arun

493 bronze badges

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

Collectives™ on Stack Overflow

Data that is posted from angular 4 is getting as null in .net core web api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related