How to pass the data from Angular2 for WebAPI Post Action, in case parameter exists inside a class of VM

Question

User-1744141586 posted

I need to pass the data from Angular to WebAPI Post action method. All is working. But my problem is I need to send the data to the action method parameter, in which fields are inside a class of View Model.

Can anyone refer the below link and help me. I have explained the issue here

https://stackoverflow.com/questions/48516705/how-to-pass-the-data-from-angular2-for-webapi-post-action-in-case-parameter-exi/48517085?noredirect=1#comment84031411_48517085

Answer 1

User283571144 posted

Hi Shailesh Bhat,

I need to pass the data from Angular to WebAPI Post action method. All is working. But my problem is I need to send the data to the action method parameter, in which fields are inside a class of View Model.

According to your description, we couldn't understand your problem clearly.

Could you please post the constructor of the categoryVM?

Could you please post the details codes about how to use angular2 send the request to the web api?

If you could post more details codes, it will be more easily for us to reproduce the issue and find the solution.

Best Regards,

Brando

Answer 2

User-1744141586 posted

categories: CategoryVM[]=[];
    constructor(private _http:Http) { }
    createCategory(vm: CategoryVM): Observable<CategoryVM> 
    { 
      vm.ServMast.ParentId = 5; 
      this.categories.push(vm); 
      var body = JSON.stringify(vm); 
      var headerOptions = new Headers({ 'Content-Type': 'application/json'}); 
      var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions }); 
      return this._http.post('http://localhost:55861/api/CategoryApi/Post', body, requestOptions).map((res: Response) => res.json()); 
   }

Above is the code of Data posting to WebApi

Answer 3

User283571144 posted

Hi Shailesh Bhat,

categories: CategoryVM[]=[];
    constructor(private _http:Http) { }
    createCategory(vm: CategoryVM): Observable<CategoryVM> 
    { 
      vm.ServMast.ParentId = 5; 
      this.categories.push(vm); 
      var body = JSON.stringify(vm); 
      var headerOptions = new Headers({ 'Content-Type': 'application/json'}); 
      var requestOptions = new RequestOptions({ method: RequestMethod.Post, headers: headerOptions }); 
      return this._http.post('http://localhost:55861/api/CategoryApi/Post', body, requestOptions).map((res: Response) => res.json()); 
   }

Above is the code of Data posting to WebApi

Could you please post the string of the body?

If the generated json format doesn't match the web api model format, web api will not read the nested model value.

Best Regards,

Brando

Answer 4

User-1744141586 posted

Same question I have(How to generate json format as WebAPI model format?). Below is the generated json format

vm = "{"Name":"cat5","ParentId":5}"

Answer 5

User283571144 posted

Hi  Shailesh Bhat,

According to your codes posted in SO, I found the CategoryVM is like below:

 public class CategoryVM : BaseVM
{
    private ServMast _serviceMast;
    public ServMast ServMast
    {
        get
        {
            if (_serviceMast == null)
            {
                _serviceMast = new ServMast();
            }
            return _serviceMast;
        }
        set
        {
            _serviceMast = value;
        }
    }
}

public class ServMast:Smart.Model.Base.BaseFactTable
{
    [DisplayName("Category Name"), Required()]
    public string Name { get; set; }

    public string ParentId { get; set; }

}

But your json string is like this :

"{"Name":"cat5","ParentId":5}"

The web api will not auto fill the data into the ServMast.

I suggest you could try to creat a exmaple CategoryVM model with value and using newtonsoft json to serlized the model to json.

Codes like this:

            //fill the value to the CategoryVM
            CategoryVM v1 = new CategoryVM();
            

            string jsonre = JsonConvert.SerializeObject(v1);

This is the right json format.

Best Regards,

Brando