Post multiple bodies to web api controller

Question

I have a angular service which have a post method where i need to send data from two different bodies to a asp.net core controller. The first bodie contains data from an EventListener and the second contains an id: number.

First i have the method which takes both values and send them to the createResoure method.

  getData(areaid: any) {
    window.addEventListener("message", (e) => {
      let data = JSON.parse(e.data);
      console.log(data, {areaid: areaid});
      this.createResource(data, areaid).subscribe(data => this.resources.push(data, areaid));
      }, false);
  }

and here i have the post method.

  createResource(resource: Resource, id: any): Observable<Resource> 
  {
    let body = JSON.stringify(resource)
    let body2 = JSON.stringify({areaid: id});
    var returndata = {body, body2}
    console.log({returndata})
    return this.httpclient.post<Resource>(this.endpoint + '/resource/insertresource', returndata, this.httpOptions)
     .pipe(catchError(this.handleError('addResource', resource))
     );
    }

When I log this the body it looks like this:

returndata:
body: "{"id":282213,"title":"page 1","description":"","thumbnail":"https://site/image/resourcethumbnail?guid=ec9a136d-8ae6-47dd-ab79-14fd47a4f300","url":"https://site/l/show.html#yr7ER"}"
body2: "{"areaid":20}"

But when i recive the values into my controller every value gets null.

public IEnumerable<Resource> InsertResource(Resource resource)
{
    using(var connection = new SqlConnection(connectionString))
    {
        var query = ($@"INSERT INTO [dbo].[Resource]([Id], [Title], [Thumbnailurl], [ViewUrl], [Description], [AreaId]) 
                                 VALUES (@Id, @title, @Thumbnail, @Url, @Description, @areaid);");

        var getById = connection.Query<Resource>(query, new {resource.Id, resource.Title, resource.Thumbnail, resource.Url, resource.Description, resource.AreaId});
        return getById;
    }
}

Model:

 public class Resource
    {
        [Key]
        public int ResourceId { get; set; }
        public int Id { get; set; }
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        public string Url { get; set; }
        public string Description { get; set; }
        public int AreaId { get; set; } //foreign key
    }

How do i need to format the post request in the angular service so that the values get inserted right in the model?

Answer 1

Your controller is expecting a Resource object but your POST request looks more like this:

{
  body: "{\"id\": 123, \"title\": \"xyz\", ...}",
  body2: "{\"areaid\":20}"
}

Firstly, you can drop the JSON.stringify as Angular will encode javascript objects for you.

Secondly, you can use the spread (...) operator to combine multiple objects into one, e.g.

createResource(resource: Resource, id: any): Observable<Resource> 
{
  const returndata = {areaid: id, ...resource};
  console.log(returndata);
  return this.httpclient.post<Resource>(this.endpoint + '/resource/insertresource', returndata, this.httpOptions)
   .pipe(catchError(this.handleError('addResource', resource)));
}