No HTTP resource was found that matches the request URI in Angular 2

Question

I am trying to post data to a web api with this structure: Ledger Header and a list of ledger details . This is my class in the web api for the two:

public class PropertyLedgerDetail
{
    [Key]
    public int LedgerDetailID { get; set; }
    public int LedgerID { get; set; }
    public int? TransactionID { get; set; }
    public int? TransactionTypeID { get; set; }
    public double? Amount { get; set; }
    public double? PaymentAmount { get; set; }
    public int Month { get; set; }
    public int Year { get; set; }
    [StringLength(1000)]
    public string Remarks { get; set; }
    public bool Voided { get; set; }
    public DateTime? PostingDateTime { get; set; }
}

public class PropertyLeger
{
    [Key]
    public int LedgerID { get; set; }
    public int CollectingAgentID { get; set; }
    public int UnitID { get; set; }
    public int PaymentTypeID { get; set; }
    [StringLength(15)]
    public string ORNumber { get; set; }
    public int? VoidedLedgerID { get; set; }
    public bool? Voided { get; set; }
    [StringLength(100)]
    public string Remarks { get; set; }
    public DateTime? TransactionDateTime { get; set; }
    public DateTime? PostingDateTime { get; set; }
}

and this is to combine the two classes so I can receive it from my frontend:

public class AddLedger
{
    public PropertyLeger PropertyLedger { get; set; }
    public List<PropertyLedgerDetail> PropertyLedgerDetails { get; set; }
}

In my Angular front end, this is how I set up the properties to send:

Get values from 2 forms

add() {
const PropertyLedgerModel: any = {
    CollectingAgentID: this.CollectingAgentID.value,
    UnitID: this.unitId,
    PaymentTypeID: this.PaymentTypeID.value,
    ORNumber: this.ORNumber.value,
    VoidedLedgerID: this.VoidedLedgerID.value,
    Voided: this.Voided.value,
    Remarks: this.Remarks0.value
}
const PropertyLedgerDetailsModel: any[] = this.dataSource;
const model: any = {
    PropertyLedger: PropertyLedgerModel,
    PropertyLedgerDetails: PropertyLedgerDetailsModel
}

this.pps.addLedger(model)
    .subscribe((data: any) => {
    debugger;
    if (data.StatusCode === 200) {
        this.ts.success(data.ReasonPhrase);
    } else {
        this.ts.error(data.ReasonPhrase);
    }
    },
err => {
    this.ts.error('An error has occured in saving payment(s): ' +err);
})
}

To actually send this to the web api

addLedger(model: any) {
    debugger;
    const ep = this.rootUrl + '/api/newpropertyledger';
    const PropertyLedgerModel: any = model.PropertyLedger;
    const PropertyLedgerDetailsModel: any [] = model.PropertyLedgerDetails;
    const Model: any = {
        PropertyLedger: PropertyLedgerModel,
        PropertyLedgerDetails: PropertyLedgerDetailsModel
    };
    return this.http.post(ep, Model);
}

I created a debug point on the part that will receive the data:

but the data from the front end doesn't reach the web api. I just get this error:

Message:"No HTTP resource was found that matches the request URI 'http://localhost:15232/api/newpropertyledger'."
MessageDetail:"No type was found that matches the controller named 'newpropertyledger'."

Please show me how to do it right. Thank you so much.

Answer 1

Assuming your api routing is correct ie any of the api methods are getting hit, this should help..

addLedger(model: any) {
    debugger;
    const ep = this.rootUrl + '/api/newpropertyledger';
    const PropertyLedgerModel: any = model.PropertyLedger;
    const PropertyLedgerDetailsModel: any [] = model.PropertyLedgerDetails;
    const Model: any = {
        PropertyLedger: PropertyLedgerModel,
        PropertyLedgerDetails: PropertyLedgerDetailsModel
    };
    return this.http.post(ep, JSON.stringify(ledger));
}

public HttpResponseMessage NewPropertyLedger(string data)
{
             AddLedger ledger = JsonConvert.DeserializeObject<AddLedger>(data);
}