C# .NET Core 2.2 API not receiving parameter object being sent from Angular front end

Question

I am trying to make a post request to my C# ASP.NET Core 2.2 backend from Angular. The API is being hit, but my parameter is not being received by the API and is being instead initialized as null.

When I check the network tab my parameters are being sent and are matching the parameter type in the function, but it is still showing as null. I have also tried adding a [FromBody] attribute to the parameter but that makes no difference.

Why is the parameter not received on the backend?

Backend API structure

[HttpPost]
public void GetCanadaPostRates(ShippingRateModel info)
{
    // this is being hit but info is showing as null

    // do something
}

Frontend service:

export class ShippingService {

  private apiUrl = environment.apiBaseUrl + '_3rdPartyShipping/';
    constructor(private http: HttpClient) {}

    getCanadaPostShippingQuote(info) {
        return this.http.post(this.apiUrl + 'GetCanadaPostRates', info);
    }
}

Frontend service call:

this.shippingService.getCanadaPostShippingQuote(shippingRates).subscribe(res => {})

Frontend model:

export class ShippingRateModel {
    WeightKg: number;
    OriginPostalCode: string;
    DestPostalCode: string;
}

Backend model:

namespace Server.Models
{
    public class ShippingRateModel
    {
        float WeightKg { get; set; }
        string OriginPostalCode { get; set; }
        string DestPostalCode { get; set; }
    }
}

Screenshot of network request:

user_1366179 · Answer

Your issue is with accessibility of members in the deserialization of the backend type.

define your properties of that type to be public — that should propagate those members with the values in the request payload.

namespace Server.Models
{
    public class ShippingRateModel
    {
        public float WeightKg { get; set; }
        public string OriginPostalCode { get; set; }
        public string DestPostalCode { get; set; }
    }
}

C# .NET Core 2.2 API not receiving parameter object being sent from Angular front end

1 Answers