Angular 6 Post body with array inside request object to web API

Question

I want to pass data from angular post to web api. But in web api it shown null.

My intention is to pass list inside object through POST request to Web Api.

Angular Service POST Method :

postData(URL : string,body : any) : Observable<any> {     
var dto = {sortcolumn:"CustomerName", sortorder:"asc", pagenumber:"0",pagesize: "10"
          ,ddlUnits: [{"Value": "20022", "Text": "Arvind"},{"Value": "20022", "Text": "Arvind"}]
          };             
let bodystr = JSON.stringify(dto);

const httpOptions = {
  headers: new HttpHeaders({
    //'Content-Type':  'application/x-www-form-urlencoded',        
    'Content-Type':  'application/json',        
  })
};

return this._http.post<any>(this.BaseURL + URL, bodystr,httpOptions)

// I will .subscribe it in component when i will call this service method.

WEB API Action Method:

 [Route("api/AllCustomers")]
    [HttpPost]
    public IHttpActionResult GetAllCustomerPOST([FromBody] CustomerDTO dto)
    {            
        try
        {
            List<GetAllCustomer_Result> lst = clsDCustomer.GetAllCustomer().ToList();               
            return new CustomResponseResult(HttpStatusCode.OK, Request, lst);
        }
        catch
        {
            return new CustomResponseResult(HttpStatusCode.InternalServerError, Request, Constants.MSGInternamServerError);
        }
    }

CLASS Structure (passed in action request)

public class CustomerDTO 
{
    public long ID { get; set; }

    [Required(ErrorMessage = "Required")]
    [Display(Name = "Customer Name")]
    public string CustomerName { get; set; }

    [Required(ErrorMessage = "Required")]
    [MaxLength(length: 10, ErrorMessage = "Maximun length for mobile no is 10 digit")]
    [Display(Name = "Mobile No")]
    public string MobileNo { get; set; }

    [Display(Name = "Contact No")]
    public string ContactNo { get; set; }

    [Display(Name = "Address")]
    public string Address { get; set; }

    public int CreatedBy { get; set; }
    public System.DateTime CreatedOn { get; set; }

    public List<DropDownList> ddlUnits { get; set; }

    public int pagenumber { get; set; }
    public int pagesize { get; set; }
    public string sortcolumn { get; set; }
    public string sortorder { get; set; }
}   
public class DropDownList
{
    public string Value { get; set; }
    public string Text { get; set; }
}

I have passed body data in HttpParams() with 'Content-Type':'application/x-www-form-urlencoded' header and works but unable to get ddlUnits property in WEB API.

I tested with POST MAN of google with raw Body json.

{"sortcolumn":"CustomerName", "sortorder":"asc", "pagenumber":"0", "pagesize": "10","ddlUnits":[{"Value": "20022", "Text": "Arvind"},{"Value": "20022", "Text": "Arvind"}]}

It works fine

See Inspact element Network error screen shot

Can you provide some more information? What have you tried, what is not working ... — Tim Martens
did you happen to solve the issue? I'm facing similar issue on angular 6 — Karthick Radhakrishnan

G. Zidar G. Zidar · Accepted Answer · 2018-08-06T09:52:58

It is very possible that you are having problems because of the case of the property names. By default, lowercase property names are changed to uppercase first letters when converting from JSON to c# so if you change sortorder, sortcolumn, ddlUnits etc to have an upper case first letter it might work (provided you are passing the data as application/json content type)

Angular 6 Post body with array inside request object to web API

1 Answers