Pass querystring with object to WebAPI?

Question

Is it possible to pass both a querystring along with a model object from angular to webapi? My first parameter is always filled however, the model parameter is null even though I see all the data in the Request Payload.

My model

public Class Person
{
   public string Name {get; set;}
   public DateTime date {get; set;}
}

My API method

    [Route("MyRoute/")]
    [HttpPost]       
    public DataSourceResult DataResult([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request, Person model)
    {          

    }

My querystring

http://localhost:60655/api/DataInput/DataResult/?page=1&pageSize=22

Request Payload

model: {name: "Time", date: "2014-12-18T18:35:52.087Z"…}

My Post call

const queryStr = `${toDataSourceRequestString(state)}`;
const ComplexObj = {
      model: model,     
    };
    const url = this._srvrUrl + apiRoute;    
    return this._http
      .post(`${url}?${queryStr}`, ComplexObj)

Answer 1

You should be able to just use [FromUri], like:

[Route("MyRoute/")]
[HttpPost]       
public DataSourceResult DataResult([FromUri] DataSourceRequest request, Person model)
{          

}

See this very similar question already answered: Complex type is getting null in a ApiController parameter.

Answer 2

It is very unclear what you are asking, and there is a lot of unrelevant code. I am answering your titel question, but the body did not help me help you.

Using the Angular HttpClient you can pass query strings as Http parameters.

This is a method that calls an api and return an observable:

method(object: any) {
  const body = JSON.stringify(object); // Create body object
  const headers = new HttpHeaders({'Content-Type': 'application/json'}); // Create headers
  const param = "some-param"; // Create param value
  return this.http.post<IResponse>('someurl.com/some/path', body, {headers: headers, params: new HttpParams().set('param name', param )});
}